/* ============================================================ Dilekçe Yazdırmak İstiyorum — tasarım sistemi Sıfır üçüncü parti istek. Fontlar yerel, Türkçe alt küme. ⚠️ overflow-x YALNIZ html'de — body'ye ekleme (sticky başlık ölür). ============================================================ */ @font-face{ font-family:'PJS';src:url('/assets/fonts/pjs-var-tr.woff2') format('woff2-variations'); font-weight:200 800;font-style:normal;font-display:swap; } @font-face{ font-family:'Playfair';src:url('/assets/fonts/playfair-var-tr.woff2') format('woff2-variations'); font-weight:400 900;font-style:normal;font-display:swap; } /* ---------- 1. Jetonlar ---------- */ :root{ --lacivert:#0A1628; --lacivert-2:#0E1E36; --lacivert-3:#132743; --siyah:#060E1A; --altin:#8A6A25; --altin-acik:#F0CE84; --altin-koyu:#8C6A22; --krem:#F5EFE3; --zemin:#FBFAF7; --zemin-2:#FFFFFF; --zemin-3:#F2EEE6; --metin:#0A1628; --metin-2:#42536B; --metin-3:#55637A; --vurgu:#8A6A25; --vurgu-metin:#FFFFFF; --cizgi:rgba(10,22,40,.12); --cizgi-2:rgba(10,22,40,.07); --cam:rgba(255,255,255,.72); --cam-2:rgba(255,255,255,.88); --golge-s:0 2px 8px rgba(10,22,40,.07); --golge:0 14px 38px -14px rgba(10,22,40,.20); --golge-l:0 28px 60px -22px rgba(10,22,40,.24); --r-s:10px; --r:16px; --r-l:22px; --r-xl:30px; --en:1180px; --en-dar:760px; --gecis:.22s cubic-bezier(.2,.8,.3,1); color-scheme:light; } /* ---------- 2. Sıfırlama ---------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} /* ⚠️ .btn'in display:inline-flex'i hidden'ı yeniyordu */ html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth; overflow-x:hidden; /* ⚠️ body'de OLMAYACAK */ scroll-padding-top:88px; } body{ margin:0;background:var(--zemin);color:var(--metin); font-family:'PJS',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:clamp(16px,.42vw + 15px,17.5px);line-height:1.72; font-weight:380;letter-spacing:.001em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .3s ease,color .3s ease; } img,video{max-width:100%;height:auto;display:block} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3,h4{font-family:'Playfair',Georgia,'Times New Roman',serif;font-weight:700;line-height:1.16;margin:0;letter-spacing:-.012em} p{margin:0 0 1.05em} ul,ol{margin:0 0 1.15em;padding-left:1.35em} li{margin:.42em 0} strong{font-weight:650;color:var(--metin)} :focus-visible{outline:3px solid var(--altin);outline-offset:3px;border-radius:6px} ::selection{background:var(--altin);color:#241703} .atla{position:absolute;left:-9999px;top:0;z-index:200;background:var(--altin);color:#241703; padding:.85rem 1.4rem;border-radius:0 0 var(--r-s) 0;font-weight:700;text-decoration:none} .atla:focus{left:0} .gizli-gorsel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- 3. Kapsayıcı ---------- */ .kap{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)} .kap-dar{max-width:var(--en-dar)} /* ---------- 4. 3B Butonlar ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:1.02rem 1.9rem;border:0;border-radius:14px;cursor:pointer;text-decoration:none; font-family:'PJS',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.005em; transform:translateY(0);transform-style:preserve-3d; transition:transform .13s cubic-bezier(.2,.8,.3,1),box-shadow .13s ease,filter .2s ease; will-change:transform;-webkit-tap-highlight-color:transparent;text-align:center; } .btn svg{flex:none} .btn-birincil{ background:linear-gradient(180deg,#2E5590 0%,#23457A 55%,#1B3763 100%); color:#F5EFE3;border:1px solid rgba(216,174,85,.28); /* ince altın çizgi: marka bağı */ box-shadow:0 6px 0 #142B4E,0 14px 26px -8px rgba(35,69,122,.38), inset 0 1px 0 rgba(255,255,255,.18); } .btn-birincil:hover{filter:brightness(1.14);border-color:rgba(216,174,85,.5); box-shadow:0 6px 0 #142B4E,0 18px 34px -8px rgba(35,69,122,.46), inset 0 1px 0 rgba(255,255,255,.24)} .btn-birincil:active{transform:translateY(5px); box-shadow:0 1px 0 #142B4E,0 4px 10px -4px rgba(35,69,122,.36), inset 0 1px 0 rgba(255,255,255,.16)} .btn-ikincil{ background:#FFFFFF;color:var(--metin);border:1.5px solid rgba(10,22,40,.22); box-shadow:0 6px 0 rgba(10,22,40,.10),0 12px 22px -10px rgba(10,22,40,.18), inset 0 1px 0 rgba(255,255,255,.9); } .btn-ikincil:hover{border-color:var(--vurgu);color:var(--metin); box-shadow:0 6px 0 rgba(138,106,37,.22),0 14px 26px -10px rgba(10,22,40,.2), inset 0 1px 0 rgba(255,255,255,.9)} .btn-ikincil:active{transform:translateY(5px); box-shadow:0 1px 0 rgba(10,22,40,.12),0 3px 8px -3px rgba(10,22,40,.18)} .btn-blok{width:100%} .btn-kucuk{padding:.72rem 1.25rem;font-size:.94rem;border-radius:12px} .btn-birincil.btn-kucuk{box-shadow:0 4px 0 #142B4E,0 8px 16px -6px rgba(35,69,122,.32),inset 0 1px 0 rgba(255,255,255,.18)} .btn-birincil.btn-kucuk:active{transform:translateY(3px);box-shadow:0 1px 0 #142B4E,0 3px 8px -3px rgba(35,69,122,.3)} .btn-ikincil.btn-kucuk{box-shadow:0 4px 0 rgba(10,22,40,.10),0 8px 16px -8px rgba(10,22,40,.16),inset 0 1px 0 rgba(255,255,255,.9)} .btn-ikincil.btn-kucuk:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(10,22,40,.12)} /* ---------- 5. Cam paneller ---------- */ .cam{ background:var(--cam);border:1px solid var(--cizgi);border-radius:var(--r-l); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:var(--golge); } .cam{background:var(--cam-2);box-shadow:var(--golge-s)} /* ---------- 6. Başlık / gezinme ---------- */ .ustluk{ position:sticky;top:0;z-index:60; /* ⚠️ backdrop-filter burada YIĞIN BAĞLAMI kurar */ background:color-mix(in srgb,var(--zemin) 55%,transparent); backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%); border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; } /* Camın üst kenarındaki ince ışık çizgisi — buzlu cam hissini veren detay */ .ustluk::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 18%,rgba(216,174,85,.30) 50%,rgba(255,255,255,.14) 82%,transparent); opacity:0;transition:opacity .3s ease; } /* Sayfa kaydırılınca cam koyulaşır ve zeminden ayrılır */ .ustluk[data-kaydirildi="1"]{ background:color-mix(in srgb,var(--zemin) 72%,transparent); box-shadow:0 8px 32px -12px rgba(0,0,0,.55); } .ustluk[data-kaydirildi="1"]::after{opacity:1} .ustluk{background:color-mix(in srgb,#FFFFFF 58%,transparent)} .ustluk[data-kaydirildi="1"]{ background:color-mix(in srgb,#FFFFFF 76%,transparent); box-shadow:0 8px 28px -14px rgba(10,22,40,.22); } .ustluk-ic{display:flex;align-items:center;gap:1rem;min-height:72px} .marka{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:800; font-size:1.03rem;letter-spacing:-.015em;flex:none} .marka img{width:34px;height:34px;border-radius:9px} .marka span{font-family:'Playfair',serif;font-weight:700} .marka b{color:var(--vurgu);font-weight:700} .gez{margin-left:auto;display:flex;align-items:center;gap:.35rem} .gez a:not(.btn){padding:.5rem .78rem;border-radius:10px;text-decoration:none;font-size:.925rem; font-weight:520;color:var(--metin-2);transition:color var(--gecis),background var(--gecis)} .gez a:not(.btn):hover{color:var(--metin);background:var(--cam-2)} .gez .btn{display:none} /* masaüstünde gizli — üstlükte zaten telefon butonu var */ /* ⚠️ margin-left:auto BURADA olmalı — mobilde .gez position:fixed olduğu için onun auto margin'i akıştan çıkıyor ve eylem grubu ortada kalıyordu. */ .ustluk-eylem{display:flex;align-items:center;gap:.55rem;flex:none;margin-left:auto} .menu-dugme{ width:42px;height:42px;display:inline-grid;place-items:center;flex:none; background:var(--cam);border:1px solid var(--cizgi);border-radius:12px;cursor:pointer; color:var(--metin);transition:background var(--gecis),transform .12s ease,border-color var(--gecis)} .menu-dugme:hover{background:var(--cam-2);border-color:var(--altin)} .menu-dugme:active{transform:translateY(2px)} .menu-dugme{display:none} @media (max-width:960px){ .menu-dugme{display:inline-grid} .ustluk-eylem .btn{display:none} .gez{ position:fixed;inset:72px 0 auto;margin:0;padding:1rem clamp(1.1rem,4vw,2rem) 1.6rem; flex-direction:column;align-items:stretch;gap:.2rem; background:var(--zemin-2);border-bottom:1px solid var(--cizgi); box-shadow:var(--golge-l); /* ⚠️ menüde backdrop-filter YOK — perde/yığın bağlamı tıklamayı yutuyor */ transform:translateY(-12px);opacity:0;visibility:hidden; transition:transform var(--gecis),opacity var(--gecis),visibility var(--gecis); max-height:calc(100dvh - 72px);overflow-y:auto; } .gez[data-acik="1"]{transform:translateY(0);opacity:1;visibility:visible} .gez a:not(.btn){padding:.85rem .9rem;font-size:1rem;border-bottom:1px solid var(--cizgi-2)} .gez .btn{display:inline-flex;margin-top:.9rem} } /* ---------- 7. Kahraman ---------- */ .kahraman{position:relative;padding:clamp(3.2rem,8vw,6rem) 0 clamp(2.6rem,6vw,4.5rem);overflow:hidden} .kahraman::before{ content:"";position:absolute;inset:-30% -10% auto;height:min(78vh,720px);z-index:-1; background: radial-gradient(58% 52% at 20% 26%,rgba(216,174,85,.11),transparent 64%), radial-gradient(48% 46% at 84% 10%,rgba(60,110,190,.09),transparent 66%); filter:blur(22px);pointer-events:none; } .kahraman-izgara{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center} .kahraman h1{font-size:clamp(2.35rem,5.6vw,4.15rem);margin-bottom:.5rem;font-weight:800} .kahraman h1 em{font-style:normal;color:var(--vurgu); background:linear-gradient(180deg,var(--altin-acik),var(--altin)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .kahraman h1 em{background:none;-webkit-text-fill-color:var(--vurgu);color:var(--vurgu)} .kahraman-alt{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--metin-2);max-width:38ch;margin-bottom:1.9rem} .kahraman-btn{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.7rem} /* Hero ana çağrısında nabız. ⚠️ transform:scale DEĞİL box-shadow yayılımı — scale oranlı büyüdüğü için geniş butonda yandaki butonun üstüne taşıyordu. Yayılım sabit px büyür. ⚠️ Halka sarmalayıcıda; .btn'in kendi transform'u yığın bağlamı kurduğu için butonun ::after'ı arkasına geçemiyordu. */ .nabizli{position:relative;display:inline-flex;border-radius:14px} .nabizli::before{ content:"";position:absolute; /* ⚠️ inset alt tarafta -6px: butonun 3B gölgesi onu 6px daha uzun gösteriyor, hâle yalnız kutuyu sarınca butondan KOPUK duruyordu. */ inset:0 0 -6px 0;border-radius:16px;pointer-events:none; animation:heroNabiz 2.6s ease-out infinite; } /* Sert halka yerine bulanık hâle — butondan yayılıyormuş gibi okunur. Ara duraklar şart: tek sıçramada saydamlık hemen sıfırlanıyor ve hâle döngünün yalnız %14'ünde görünüyordu. */ @keyframes heroNabiz{ 0% {box-shadow:0 0 10px 0px rgba(216,174,85,.50)} 38% {box-shadow:0 0 16px 5px rgba(216,174,85,.30)} 66% {box-shadow:0 0 22px 9px rgba(216,174,85,.12)} 82% {box-shadow:0 0 26px 12px rgba(216,174,85,0)} 100%{box-shadow:0 0 10px 0px rgba(216,174,85,0)} } /* Fare üzerindeyken nabız durur — kullanıcı zaten fark etmiştir. */ .nabizli:hover::before{animation-play-state:paused;box-shadow:none} @media (prefers-reduced-motion:reduce){.nabizli::before{animation:none}} .rozetler{display:flex;flex-wrap:wrap;gap:.5rem .95rem;list-style:none;padding:0;margin:0; font-size:.885rem;color:var(--metin-3)} .rozetler li{display:flex;align-items:center;gap:.4rem} .rozetler svg{color:var(--vurgu);flex:none} .kahraman-gorsel{position:relative} .kahraman-gorsel img{border-radius:var(--r-xl);box-shadow:var(--golge-l);border:1px solid var(--cizgi)} .kahraman-kart{ position:absolute;right:-6px;bottom:-22px;padding:.9rem 1.15rem;border-radius:var(--r); display:flex;align-items:center;gap:.75rem;font-size:.9rem;line-height:1.35;max-width:250px} .kahraman-kart b{display:block;font-size:1.16rem;color:var(--vurgu);font-family:'Playfair',serif} @media (max-width:900px){ .kahraman-izgara{grid-template-columns:1fr;gap:2.4rem} .kahraman-alt{max-width:none} .kahraman-kart{right:8px;bottom:-16px} } /* ---------- 8. Şerit ---------- */ .serit{border-block:1px solid var(--cizgi-2);background:var(--zemin-2)} .serit ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none;margin:0;padding:0; background:var(--cizgi-2)} .serit li{background:var(--zemin-2);padding:1.5rem 1.15rem;display:flex;gap:.85rem;align-items:flex-start} .serit svg{color:var(--vurgu);flex:none;margin-top:2px} .serit b{display:block;font-size:.98rem;margin-bottom:.15rem} .serit span{font-size:.875rem;color:var(--metin-3);line-height:1.55} @media (max-width:860px){.serit ul{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.serit ul{grid-template-columns:1fr}} /* ---------- 9. Bölümler ---------- */ .bolum{padding:clamp(3.2rem,7vw,5.4rem) 0;position:relative} .bolum-alt{background:var(--zemin-2)} .bolum-koyu{background:var(--zemin-3)} .bolum-bas{max-width:70ch;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)} .etiket{display:inline-flex;align-items:center;gap:.5rem;font-family:'PJS',sans-serif; font-size:.775rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--vurgu);margin-bottom:.85rem} .etiket::before{content:"";width:26px;height:2px;background:var(--vurgu);border-radius:2px} h2{font-size:clamp(1.72rem,3.4vw,2.6rem)} .bolum-bas p{margin-top:.85rem;color:var(--metin-2);font-size:1.045rem} h3{font-size:clamp(1.2rem,1.9vw,1.45rem);margin:2.3rem 0 .7rem} h4{font-family:'PJS',sans-serif;font-size:1.03rem;font-weight:700;margin:1.5rem 0 .45rem; color:var(--vurgu);letter-spacing:0} .govde{max-width:72ch} .govde>p{color:var(--metin-2)} .govde>p:first-of-type{color:var(--metin)} .govde li{color:var(--metin-2)} /* ⚠️ :not(.btn) şart — aksi hâlde bu kural butonun kendi metin rengini eziyor (.govde a özgüllüğü .btn-birincil'den yüksek). */ .govde a:not(.btn){color:var(--vurgu);text-underline-offset:3px;text-decoration-thickness:1px} .govde a:not(.btn):hover{text-decoration-thickness:2px} /* ---------- 10. Kartlar / kutular ---------- */ .kutu{padding:1.4rem 1.55rem;border-radius:var(--r);background:var(--cam); border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);margin:1.6rem 0} .kutu p:last-child{margin-bottom:0} .kutu b:first-child{color:var(--vurgu)} .kod{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem; background:var(--zemin-3);border:1px solid var(--cizgi);border-radius:var(--r-s); padding:1.05rem 1.25rem;margin:1.3rem 0;white-space:pre-wrap;line-height:1.7;color:var(--metin-2); overflow-x:auto} .izgara{display:grid;gap:1.15rem;margin:1.7rem 0} .izgara-2{grid-template-columns:repeat(2,1fr)} .izgara-3{grid-template-columns:repeat(3,1fr)} @media (max-width:820px){.izgara-2,.izgara-3{grid-template-columns:1fr}} .kart{padding:1.5rem 1.6rem;border-radius:var(--r);background:var(--cam);border:1px solid var(--cizgi); transition:transform var(--gecis),border-color var(--gecis),box-shadow var(--gecis)} .kart:hover{transform:translateY(-3px);border-color:rgba(216,174,85,.42);box-shadow:var(--golge)} .kart h3,.kart h4{margin-top:0} .kart p:last-child{margin-bottom:0} .kart-no{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px; background:linear-gradient(180deg,var(--altin-acik),var(--altin));color:#241703; font-weight:800;font-size:1rem;margin-bottom:.85rem;box-shadow:0 3px 0 var(--altin-koyu)} .konu-liste{list-style:none;padding:0;margin:1.1rem 0 0} .konu-liste li{padding:.55rem 0 .55rem 1.6rem;position:relative;border-bottom:1px solid var(--cizgi-2); color:var(--metin-2);font-size:.965rem} .konu-liste li::before{content:"";position:absolute;left:0;top:1.02em;width:7px;height:7px; border-radius:2px;background:var(--vurgu);transform:rotate(45deg)} .konu-liste li:last-child{border-bottom:0} /* fiyat */ .fiyat-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin:1.9rem 0} @media (max-width:700px){.fiyat-izgara{grid-template-columns:1fr}} .fiyat{padding:1.9rem;border-radius:var(--r-l);border:1px solid var(--cizgi);background:var(--cam); text-align:center} .fiyat-one{border-color:rgba(216,174,85,.5);background: linear-gradient(180deg,rgba(216,174,85,.10),transparent 60%),var(--cam);position:relative} .fiyat-one::after{content:"Önerilen";position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:linear-gradient(180deg,var(--altin-acik),var(--altin));color:#241703; font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; padding:.28rem .8rem;border-radius:999px;box-shadow:0 2px 0 var(--altin-koyu)} .fiyat h3{margin:0 0 .35rem;font-size:1.2rem} .fiyat .rakam{font-family:'Playfair',serif;font-size:clamp(2.1rem,4.2vw,2.8rem);font-weight:800; color:var(--vurgu);line-height:1.1;margin:.35rem 0 .15rem;display:block} .fiyat .aciklama{color:var(--metin-3);font-size:.9rem;margin-bottom:1.2rem} /* ---------- 11. Görsel / video ---------- */ figure{margin:2.1rem 0} figure img{border-radius:var(--r-l);border:1px solid var(--cizgi);box-shadow:var(--golge)} figcaption{margin-top:.85rem;font-size:.905rem;color:var(--metin-3);line-height:1.62; padding-left:.9rem;border-left:2px solid var(--vurgu)} .video-sarmal{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--cizgi); box-shadow:var(--golge-l);background:#000} .video-sarmal video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover} /* ---------- 12. SSS ---------- */ .sss{border:1px solid var(--cizgi);border-radius:var(--r);background:var(--cam);margin-bottom:.75rem; overflow:hidden;transition:border-color var(--gecis)} .sss[open]{border-color:rgba(216,174,85,.42)} .sss summary{padding:1.15rem 3.2rem 1.15rem 1.4rem;cursor:pointer;position:relative;list-style:none; font-weight:620;font-size:1.015rem;color:var(--metin)} .sss summary::-webkit-details-marker{display:none} .sss summary::after{content:"";position:absolute;right:1.35rem;top:50%;width:10px;height:10px; border-right:2px solid var(--vurgu);border-bottom:2px solid var(--vurgu); transform:translateY(-70%) rotate(45deg);transition:transform var(--gecis)} .sss[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .sss summary:hover{background:var(--cam-2)} .sss-govde{padding:0 1.4rem 1.3rem;color:var(--metin-2)} .sss-govde p:last-child{margin-bottom:0} /* ---------- 13. Kapanış çağrısı ---------- */ .cagri{position:relative;overflow:hidden;background:var(--zemin-3); padding:clamp(3rem,7vw,5rem) 0;border-block:1px solid var(--cizgi-2)} .cagri::before{content:"";position:absolute;inset:auto -20% -60% ;height:340px;z-index:0; background:radial-gradient(50% 60% at 50% 100%,rgba(216,174,85,.10),transparent 72%);filter:blur(14px)} .cagri-ic{position:relative;z-index:1;text-align:center;max-width:64ch;margin-inline:auto} .cagri h2{margin-bottom:.85rem} .cagri p{color:var(--metin-2);font-size:1.06rem;margin-bottom:1.8rem} .cagri-btn{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center} .tel-buyuk{font-family:'Playfair',serif;font-size:clamp(1.6rem,3.6vw,2.15rem);font-weight:700; color:var(--vurgu);text-decoration:none;display:inline-block;margin-top:1.5rem;letter-spacing:.01em} .tel-buyuk:hover{text-decoration:underline;text-underline-offset:5px} /* ---------- 14. Alt bilgi ---------- */ .altbilgi{background:var(--zemin-3);padding:clamp(2.8rem,5vw,4rem) 0 1.8rem;font-size:.94rem} .altbilgi-izgara{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem; padding-bottom:2.2rem;border-bottom:1px solid var(--cizgi-2)} @media (max-width:880px){.altbilgi-izgara{grid-template-columns:1fr 1fr;gap:1.8rem}} @media (max-width:520px){.altbilgi-izgara{grid-template-columns:1fr}} .altbilgi h3{font-family:'PJS',sans-serif;font-size:.79rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--metin-3);margin:0 0 1rem} .altbilgi ul{list-style:none;padding:0;margin:0} .altbilgi li{margin:.5rem 0} .altbilgi a{color:var(--metin-2);text-decoration:none;transition:color var(--gecis)} .altbilgi a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:3px} .altbilgi-marka p{color:var(--metin-3);max-width:38ch;margin-top:.9rem;font-size:.9rem} .yasal{margin-top:1.8rem;padding:1.15rem 1.35rem;border-radius:var(--r);border:1px solid var(--cizgi-2); background:var(--cam);color:var(--metin-3);font-size:.855rem;line-height:1.66} .altbilgi-son{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;align-items:center; margin-top:1.6rem;color:var(--metin-3);font-size:.875rem} .w4-imza{color:var(--metin-3);text-decoration:none} .w4-imza a{color:var(--metin-2);font-weight:600;text-decoration:none} .w4-imza a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:3px} /* ---------- 15. Yumuşak beliriş ---------- */ /* ⚠️ transform SINIFTA — satır içi transform reset'i yener */ .js .belir{opacity:0;transform:translateY(22px); transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)} .js .belir.gorundu{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .js .belir{opacity:1;transform:none} .btn:active{transform:none} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cam,.ustluk,.ustluk[data-kaydirildi="1"]{background:var(--zemin-2)} } @media print{ .ustluk,.gez,.cagri,.kahraman-btn,.menu-dugme,.sabit-eylem,.bildirim{display:none!important} body{background:#fff;color:#000} } /* ============================================================ 16. Logo (tema duyarlı) ============================================================ */ .marka img{width:auto;height:38px;border-radius:0} @media (max-width:400px){.marka img{height:32px}} /* ============================================================ 17. Sayfa içindekiler ============================================================ */ .icindekiler{margin:0 0 clamp(2rem,5vw,3.2rem);padding:clamp(1.4rem,3vw,2rem);border-radius:var(--r-l)} .icindekiler h2{font-size:1.15rem;font-family:'PJS',sans-serif;font-weight:700;letter-spacing:.01em; margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem} .icindekiler h2 svg{color:var(--vurgu);flex:none} .icindekiler ol{list-style:none;counter-reset:ic;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem .9rem} @media (max-width:760px){.icindekiler ol{grid-template-columns:1fr}} .icindekiler li{counter-increment:ic;margin:0} .icindekiler a{display:flex;gap:.75rem;align-items:baseline;padding:.62rem .7rem;border-radius:10px; text-decoration:none;color:var(--metin-2);font-size:.955rem;line-height:1.5; transition:background var(--gecis),color var(--gecis)} .icindekiler a::before{content:counter(ic,decimal-leading-zero);font-family:'Playfair',serif; font-weight:700;font-size:.86rem;color:var(--vurgu);flex:none;min-width:1.6em} .icindekiler a:hover,.icindekiler a:focus-visible{background:var(--cam-2);color:var(--metin)} /* ============================================================ 18. Adım adım rehber ============================================================ */ .adimlar{list-style:none;counter-reset:ad;padding:0;margin:2rem 0 0;position:relative} .adimlar::before{content:"";position:absolute;left:23px;top:16px;bottom:16px;width:2px; background:linear-gradient(180deg,var(--vurgu),transparent);opacity:.32} .adim{counter-increment:ad;position:relative;padding:0 0 1.55rem 4.1rem;margin:0} .adim:last-child{padding-bottom:0} .adim::before{content:counter(ad);position:absolute;left:0;top:0;width:48px;height:48px; display:grid;place-items:center;border-radius:15px; background:linear-gradient(180deg,var(--altin-acik),var(--altin));color:#241703; font-family:'Playfair',serif;font-weight:800;font-size:1.3rem; box-shadow:0 4px 0 var(--altin-koyu),0 10px 20px -8px rgba(0,0,0,.55)} .adim h3{margin:.45rem 0 .45rem;font-size:1.16rem} .adim p{color:var(--metin-2);margin-bottom:0} .adim p + p{margin-top:.6rem} @media (max-width:560px){ .adimlar::before{left:18px} .adim{padding-left:3.35rem} .adim::before{width:38px;height:38px;font-size:1.08rem;border-radius:12px} } /* ============================================================ 19. Sabit WhatsApp çağrısı (sağ alt) ============================================================ */ .sabit-eylem{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem); z-index:70;display:flex;transform-origin:85% 50%; animation:waDikkat 3s ease-in-out infinite} /* ⚠️ Hareket SARMALAYICIDA — butonun kendi transform'u basma efekti için serbest kalmalı. Salınım döngünün son %14'üne sıkıştırıldı: 3 sn'de bir kısa selam, arada tamamen sakin. */ @keyframes waDikkat{ 0%,86%,100%{transform:translateY(0) rotate(0deg)} 89%{transform:translateY(-6px) rotate(-2.2deg)} 92%{transform:translateY(0) rotate(1.6deg)} 95%{transform:translateY(-3px) rotate(-1deg)} 98%{transform:translateY(0) rotate(0deg)} } .sabit-eylem:hover{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.sabit-eylem{animation:none}} .wa-cagri{ position:relative;display:inline-flex;align-items:center;gap:.7rem; padding:.82rem 1.35rem .82rem .78rem;border-radius:999px;text-decoration:none; font-family:'PJS',sans-serif;font-weight:700;font-size:.97rem;letter-spacing:.005em; color:#241703;background:linear-gradient(180deg,var(--altin-acik) 0%,#D8AE55 52%,#C99B3D 100%); box-shadow:0 6px 0 var(--altin-koyu),0 16px 34px -10px rgba(140,106,34,.55), inset 0 1px 0 rgba(255,255,255,.65); transform:translateY(0); transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s ease,filter .2s ease; -webkit-tap-highlight-color:transparent;isolation:isolate; /* ⚠️ overflow:hidden YOK — nabız halkasının butonun dışına taşması gerekiyor. Işık süpürmesi kendi clip-path'iyle sınırlanıyor. */ } .wa-cagri:hover{filter:brightness(1.05); box-shadow:0 6px 0 var(--altin-koyu),0 20px 42px -10px rgba(140,106,34,.6), inset 0 1px 0 rgba(255,255,255,.7)} .wa-cagri:active{transform:translateY(5px); box-shadow:0 1px 0 var(--altin-koyu),0 5px 12px -4px rgba(140,106,34,.5), inset 0 1px 0 rgba(255,255,255,.5)} /* WhatsApp simgesi — kendi yeşiliyle, madalyon içinde */ .wa-madalyon{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center; background:linear-gradient(180deg,#3BE07A,#1FBE58);color:#fff; position:relative;z-index:0; /* kendi yığın bağlamı: halka altında, buton zemini üstünde kalsın */ box-shadow:0 2px 6px rgba(4,49,15,.35),inset 0 1px 0 rgba(255,255,255,.45)} /* Nabız — madalyondan dışa yayılan halka */ .wa-madalyon::before{content:"";position:absolute;inset:0;border-radius:50%; background:#25D366;z-index:-1; animation:waNabiz 2.4s cubic-bezier(.35,0,.35,1) infinite} @keyframes waNabiz{ 0%{transform:scale(1);opacity:.55} 70%{transform:scale(2.1);opacity:0} 100%{transform:scale(2.1);opacity:0} } /* Işık süpürmesi — premium dokunuş */ .wa-cagri::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; clip-path:inset(0 round 999px); /* overflow:hidden yerine — halkayı kırpmaz */ background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); transform:translateX(-120%);animation:waParilti 5.5s ease-in-out infinite} @keyframes waParilti{0%,62%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}} .wa-metin{display:flex;flex-direction:column;line-height:1.18;text-align:left} .wa-metin b{font-weight:800;font-size:.99rem} .wa-metin span{font-weight:600;font-size:.78rem;opacity:.72} @media (max-width:640px){ .wa-cagri{padding:.7rem 1.1rem .7rem .62rem;gap:.55rem;font-size:.9rem} .wa-madalyon{width:34px;height:34px} .wa-metin b{font-size:.9rem} .wa-metin span{display:none} } @media (max-width:380px){ .wa-metin b{font-size:.84rem} .wa-cagri{padding:.66rem .95rem .66rem .58rem} } @media (prefers-reduced-motion:reduce){ .wa-madalyon::before,.wa-cagri::before{animation:none} .wa-madalyon::before{opacity:0} } /* ============================================================ 20. Arama paneli ============================================================ */ .ara-perde{position:fixed;inset:0;z-index:90;display:none; background:rgba(4,10,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); padding:clamp(1rem,7vh,5rem) 1rem 1rem;overflow-y:auto} .ara-perde[data-acik="1"]{display:block} .ara-kutu{max-width:680px;margin-inline:auto;background:var(--zemin-2);border:1px solid var(--cizgi); border-radius:var(--r-l);box-shadow:var(--golge-l);overflow:hidden} .ara-ust{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid var(--cizgi-2)} .ara-ust svg{color:var(--vurgu);flex:none} #araGirdi{flex:1;background:transparent;border:0;outline:none;color:var(--metin); font-family:'PJS',sans-serif;font-size:1.06rem;font-weight:500;padding:.35rem 0;min-width:0} #araGirdi::placeholder{color:var(--metin-3)} .ara-kapat{background:var(--cam);border:1px solid var(--cizgi);color:var(--metin-2);cursor:pointer; border-radius:9px;padding:.32rem .6rem;font-size:.78rem;font-weight:700;flex:none} .ara-kapat:hover{color:var(--metin);border-color:var(--vurgu)} .ara-sonuc{max-height:min(56vh,460px);overflow-y:auto;padding:.5rem} .ara-sonuc a{display:block;padding:.8rem .9rem;border-radius:12px;text-decoration:none;color:var(--metin); transition:background var(--gecis)} .ara-sonuc a:hover,.ara-sonuc a:focus-visible{background:var(--cam-2)} .ara-sonuc b{display:block;font-size:.985rem;font-weight:650;margin-bottom:.2rem} .ara-sonuc span{display:block;font-size:.875rem;color:var(--metin-3);line-height:1.55} .ara-sonuc mark{background:rgba(216,174,85,.28);color:var(--metin);border-radius:3px;padding:0 2px} .ara-bos{padding:1.6rem 1rem;text-align:center;color:var(--metin-3);font-size:.94rem} .ara-ipucu{padding:.7rem 1.1rem;border-top:1px solid var(--cizgi-2);color:var(--metin-3);font-size:.8rem; display:flex;gap:.9rem;flex-wrap:wrap} .ara-ipucu kbd{background:var(--cam);border:1px solid var(--cizgi);border-radius:5px;padding:.1rem .4rem; font-family:ui-monospace,monospace;font-size:.75rem} /* ⚠️ Burada scroll-margin-top OLMAYACAK: html'deki scroll-padding-top ile toplanıp 180px kayma yapıyordu ve her bağlantı bir önceki bölümde kalıyordu. Tek kaynak: :root'taki scroll-padding-top (72px başlık + 16px pay). */ .vurgula{animation:vurgu 1.9s ease} @keyframes vurgu{0%,22%{background:rgba(216,174,85,.20)}100%{background:transparent}} /* ============================================================ 21. Bildirim (%30 kaydırmada) ============================================================ */ .bildirim{ position:fixed;left:clamp(.9rem,2.5vw,1.5rem);bottom:clamp(.9rem,2.5vw,1.5rem);z-index:75; width:min(370px,calc(100vw - 2rem));padding:1.15rem 1.25rem 1.25rem; background:var(--zemin-2);border:1px solid var(--cizgi);border-radius:var(--r-l); box-shadow:var(--golge-l); transform:translateY(18px) scale(.97);opacity:0;visibility:hidden; transition:transform .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease,visibility .42s} .bildirim[data-acik="1"]{transform:translateY(0) scale(1);opacity:1;visibility:visible} .bildirim::before{content:"";position:absolute;inset:0;border-radius:var(--r-l);pointer-events:none; background:linear-gradient(135deg,rgba(216,174,85,.13),transparent 55%)} .bildirim-ust{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.75rem;position:relative; padding-right:1.9rem} /* kapatma butonuna yer */ .bildirim-avatar{position:relative;width:44px;height:44px;flex:none;border-radius:14px; display:grid;place-items:center;color:#F5EFE3; background:linear-gradient(180deg,#2E5590,#23457A); box-shadow:0 3px 0 #142B4E,inset 0 1px 0 rgba(255,255,255,.18)} /* Çevrimiçi noktası — avatarın köşesinde, nabız atıyor */ .bildirim-nokta{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%; background:#25D366;border:2.5px solid var(--zemin-2); box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:nokta 2.1s ease-out infinite} @keyframes nokta{0%{box-shadow:0 0 0 0 rgba(37,211,102,.65)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} .bildirim h3{font-size:1.03rem;margin:.15rem 0 .25rem;line-height:1.3} .bildirim-durum{font-family:'PJS',sans-serif;font-size:.83rem;font-weight:550; color:var(--metin-3);margin:0} .bildirim p{font-size:.925rem;color:var(--metin-2);margin:0 0 1rem;position:relative} .bildirim .btn{width:100%;position:relative;gap:.5rem} .bildirim-kapat{position:absolute;top:.55rem;right:.55rem;width:30px;height:30px;border-radius:9px; background:transparent;border:0;color:var(--metin-3);cursor:pointer;display:grid;place-items:center; transition:color var(--gecis),background var(--gecis);z-index:2} .bildirim-kapat:hover{color:var(--metin);background:var(--cam-2)} @media (max-width:560px){ .bildirim{left:.75rem;right:.75rem;width:auto;bottom:calc(.75rem + 58px)} } @media (prefers-reduced-motion:reduce){.bildirim-nokta{animation:none}.vurgula{animation:none}} /* ============================================================ 22. Dilekçe yazdırma formu ============================================================ */ .form-bolum{padding:clamp(2.6rem,6vw,4.4rem) 0;background:var(--zemin-2);border-block:1px solid var(--cizgi-2)} .form-kabuk{max-width:900px;margin-inline:auto} .form-bas{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)} .form-bas h2{margin-bottom:.6rem} .form-bas p{color:var(--metin-2);max-width:56ch;margin-inline:auto} .form-kart{border-radius:var(--r-xl);border:1px solid var(--cizgi);background:var(--cam); box-shadow:var(--golge);overflow:hidden} .form-kart{background:var(--zemin-2)} /* ilerleme */ .form-ilerleme{padding:1.1rem clamp(1.1rem,3vw,1.9rem);border-bottom:1px solid var(--cizgi-2); display:flex;align-items:center;gap:.9rem;flex-wrap:wrap} .form-cubuk{flex:1;min-width:140px;height:7px;border-radius:99px;background:var(--cizgi);overflow:hidden} .form-cubuk i{display:block;height:100%;width:12.5%;border-radius:99px; background:linear-gradient(90deg,var(--altin-koyu),var(--altin),var(--altin-acik)); transition:width .42s cubic-bezier(.2,.8,.3,1)} .form-sayac{font-family:'PJS',sans-serif;font-size:.86rem;font-weight:700;color:var(--metin-2);flex:none} .form-sayac b{color:var(--vurgu)} .form-adimadi{font-size:.86rem;color:var(--metin-3);flex:none} /* gövde */ .form-govde{padding:clamp(1.3rem,3.4vw,2.2rem)} .form-adim{display:none} .form-adim[data-etkin="1"]{display:block;animation:formGir .34s cubic-bezier(.2,.8,.3,1)} @keyframes formGir{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .form-adim>h3{margin:0 0 .35rem;font-size:clamp(1.25rem,2.4vw,1.6rem)} .form-adim>.form-yardim{color:var(--metin-3);font-size:.94rem;margin-bottom:1.5rem} fieldset{border:0;margin:0 0 1.5rem;padding:0;min-width:0} legend{font-family:'PJS',sans-serif;font-weight:700;font-size:.99rem;padding:0;margin-bottom:.75rem;color:var(--metin)} .alan{margin-bottom:1.15rem} .alan>label,.alan-bas{display:block;font-family:'PJS',sans-serif;font-weight:650;font-size:.93rem; margin-bottom:.42rem;color:var(--metin)} .alan .ipuc{display:block;font-weight:400;font-size:.855rem;color:var(--metin-3);margin-top:.2rem} .zorunlu{color:var(--vurgu);margin-left:.15rem} input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{ width:100%;padding:.82rem 1rem;border-radius:12px;border:1px solid var(--cizgi); background:var(--zemin);color:var(--metin);font-family:'PJS',sans-serif;font-size:1rem; transition:border-color var(--gecis),box-shadow var(--gecis),background var(--gecis)} input[type=text],input[type=tel], input[type=email],input[type=date], select,textarea{background:#fff} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--altin); box-shadow:0 0 0 3px rgba(216,174,85,.20)} input::placeholder,textarea::placeholder{color:var(--metin-3)} textarea{resize:vertical;min-height:130px;line-height:1.65} textarea.buyuk{min-height:180px} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9B8CE' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem} .alan-hata input,.alan-hata select,.alan-hata textarea{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.16)} .hata-yazi{display:none;color:#FF8086;font-size:.855rem;margin-top:.35rem;font-weight:600} .alan-hata .hata-yazi{display:block} .hata-yazi{color:#C42127} .ikili{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media (max-width:640px){.ikili,.uclu{grid-template-columns:1fr;gap:.9rem}} /* seçenek pulları */ .pullar{display:flex;flex-wrap:wrap;gap:.55rem} .pul{position:relative} .pul input{position:absolute;opacity:0;width:0;height:0} .pul span{display:block;padding:.68rem 1.05rem;border-radius:12px;border:1px solid var(--cizgi); background:var(--zemin);font-size:.935rem;font-weight:550;cursor:pointer;color:var(--metin-2); transition:all var(--gecis);user-select:none;-webkit-tap-highlight-color:transparent} .pul span{background:#fff} .pul span:hover{border-color:rgba(216,174,85,.55);color:var(--metin)} /* Seçili durum birincil butonla aynı dilde: lacivert. */ .pul input:checked + span{background:linear-gradient(180deg,#2E5590,#23457A); color:#F5EFE3;border-color:rgba(216,174,85,.3);font-weight:700; box-shadow:0 3px 0 #142B4E,0 8px 16px -7px rgba(35,69,122,.4),inset 0 1px 0 rgba(255,255,255,.18)} .pul input:focus-visible + span{outline:3px solid var(--altin);outline-offset:3px} /* onay kutusu */ .onay{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-radius:12px; border:1px solid var(--cizgi);background:var(--zemin);cursor:pointer;transition:all var(--gecis); margin-top:.6rem} .onay{background:#fff} .onay:hover{border-color:rgba(216,174,85,.5)} .onay input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--altin);cursor:pointer} .onay span{font-size:.925rem;color:var(--metin-2);line-height:1.55} .onay input:checked ~ span{color:var(--metin)} .onay:has(input:checked){border-color:rgba(216,174,85,.6);background:rgba(216,174,85,.07)} /* örnek kutusu */ .ornek{padding:.85rem 1.05rem;border-radius:11px;background:var(--cam);border:1px dashed var(--cizgi); color:var(--metin-3);font-size:.885rem;line-height:1.6;margin-top:.55rem;font-style:italic} .ornek b{font-style:normal;color:var(--metin-2)} /* dosya yükleme */ .yukle{display:block; /* ⚠️