@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo.woff2') format('woff2')} @font-face{font-family:'Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/assets/fonts/plexsans.woff2') format('woff2')} @font-face{font-family:'Plex Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/plexmono.woff2') format('woff2')} /* ============ TOKENS ============ */ :root{ --ok-sag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); /* nötrler — mavi biasli soğuk gri */ --paper:#F8FAFC; --surface:#FFFFFF; --surface-2:#EFF5FA; --surface-3:#E3EDF6; --line:#DBE6F0; --line-2:#C1D4E4; --text:#0F2438; --text-2:#33506B; --muted:#5F7692; /* MAVİ — marka, güven, gezinme */ --brand:#0C5FAE; --brand-lit:#1580D0; --brand-deep:#08406F; --brand-soft:#E7F1FB; --tint:#EAF3FB; /* açık mavi bölüm tonu */ /* TURUNCU — yalnızca satın alma eylemi */ --buy:#DF6209; --buy-hi:#F58A2E; --buy-deep:#B84A04; --buy-line:#E8823A; --buy-soft:#FFF1E2; --buy-text:#9A4306; /* BEYAZ METIN TASIYAN TURUNCU DOLGU. --buy (#DF6209) beyazla 3.57:1 verir; "Satin al" yazisi .93rem/700, yani 15.3px — WCAG'de kalin metnin buyuk sayilmasi icin 18.66px gerekir, dolayisiyla bu NORMAL metindir ve 4.5:1 ister. --buy'u genel olarak koyulastirmak markanin turuncusunu bozardi (kenarlik, ikon, rozet hepsi ondan besleniyor), bu yuzden yalnizca beyaz yazi tasiyan ZEMINLER icin ayri bir belirtec var. */ --buy-dolgu:#C05408; /* beyaz uzerinde 4.65:1 */ --buy-dolgu-koyu:#A64304; /* beyaz uzerinde 6.13:1 */ /* YEŞİL — dahil, ücretsiz, kazanç */ --green:#12804A; --green-lit:#17A05C; --green-soft:#E4F4EB; --green-text:#0C6339; --signal:#D42A20; --ink:#0A2337; /* koyu lacivert — küçük vurgu yüzeyleri */ --ink-2:#123049; --ink-line:#1E4260; --ink-text:#F1F7FC; --ink-muted:#9DB6CC; --radius:14px; --radius-lg:20px; --shadow-card:0 1px 2px rgba(15,40,70,.05), 0 10px 26px -16px rgba(15,40,70,.22); --shadow-lift:0 20px 54px -26px rgba(15,40,70,.38); --wrap:1180px; --f-display:'Archivo', 'Segoe UI', system-ui, sans-serif; --f-body:'Plex Sans', system-ui, -apple-system, sans-serif; --f-mono:'Plex Mono', ui-monospace, 'SFMono-Regular', monospace; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0C1620; --surface:#122030; --surface-2:#18293A; --surface-3:#1F3347; --line:#22384C; --line-2:#2E4A63; --text:#E9F1F8; --text-2:#C4D5E4; --muted:#8BA4BB; --brand:#4FA3E8; --brand-lit:#6FBAF5; --brand-deep:#2B7CC0; --brand-soft:#152A3E; --tint:#112232; --buy:#F07A22; --buy-hi:#FF9A45; --buy-deep:#D25A08; --buy-line:#E8823A; --buy-soft:#33200E; --buy-text:#F0A268; --buy-dolgu:#BC580D; --buy-dolgu-koyu:#A04A0A; /* beyazla 4.63:1 / 6.04:1 */ --green:#3DBB7E; --green-lit:#4FD08F; --green-soft:#12281E; --green-text:#5FCF97; --ink:#071726; --ink-2:#0E2438; --ink-line:#1D3C56; --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.7); --shadow-lift:0 20px 54px -26px rgba(0,0,0,.85); } } :root[data-theme="dark"]{ --paper:#17120C; --surface:#1E1811; --surface-2:#251E15; --surface-3:#2E2419; --line:#332818; --line-2:#443722; --text:#F6EDE1; --text-2:#DFD0BE; --muted:#A6917C; --brand:#F0763F; --brand-lit:#FF8B55; --brand-deep:#E4572E; --tint:#33240F; --buy-line:#DDB35A; --buy-soft:#33280F; --buy-text:#E0BC6C; --buy-dolgu:#BC580D; --buy-dolgu-koyu:#A04A0A; --green:#4CA57C; --green-soft:#16281F; --ink:#0F0B06; --ink-2:#1A130B; --ink-line:#3A2C1B; --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.65); --shadow-lift:0 20px 54px -26px rgba(0,0,0,.8); } /* ============ BASE ============ */ *,*::before,*::after{box-sizing:border-box} body{ margin:0; background:var(--paper); color:var(--text); font-family:var(--f-body); font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit} :focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px} .skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 8px 0} .skip:focus{left:0} h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; letter-spacing:-.028em; line-height:1.08; margin:0; text-wrap:balance; color:var(--text)} h1{font-size:clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem)} h2{font-size:clamp(1.55rem, 1.1rem + 1.8vw, 2.4rem)} h3{font-size:1.1rem; letter-spacing:-.015em; line-height:1.26} /* BASLIK SEVIYESI belge yapisidir, BOYUT bicimdir. Bazi basliklar h1'in hemen altinda h3 olarak yaziliyordu; ekran okuyucular icin bu, arada bir bolum atlanmis demektir. Etiketler dogru seviyeye cekildi, gorunum degismesin diye eski olculer bu siniflara alindi. */ h2.bslk-kucuk{font-size:1.1rem; letter-spacing:-.015em; line-height:1.26} h3.bslk-kucuk{font-size:.97rem; letter-spacing:-.01em} h4{font-size:.97rem; letter-spacing:-.01em} p{margin:0} .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px} .sec{padding-block:72px} .sec--tight{padding-block:48px} .sec--soft{background:var(--surface-2); border-block:1px solid var(--line)} .sec--warm{background:linear-gradient(180deg, var(--tint), var(--surface-2)); border-block:1px solid var(--line)} /* Beyaz yuzey: --warm ve --soft bolumleri yan yana gelince ikisi de acik mavimsi kaldigi icin birbirine karisiyordu. Bu tur ikisinden de ayrisir. */ .sec--beyaz{background:var(--surface); border-block:1px solid var(--line)} /* Acik turuncu bant. Ustten asagi beyaza acilir ki agir durmasin; bolum aydinlik kalir ama zeminden ayrisir. */ .sec--sicak{background:linear-gradient(180deg, var(--buy-soft), var(--surface)); border-block:1px solid var(--buy-line)} /* ============ ATOMS ============ */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); } .eyebrow::before{content:""; width:20px; height:1.5px; background:var(--buy-line); flex:none} /* .lede cogu yerde renkli zemin (.pagehead, .sec--soft) uzerinde duruyor; --muted orada 4.16:1 kaliyordu. --text-2 ile 7.48:1. */ .lede{color:var(--text-2); font-size:1.05rem; max-width:62ch; line-height:1.68} /* Paket kartinin adi anlamsal olarak h3'tur ama gorunumu ust-baslik (.eyebrow) kalir; h3'un varsayilan olcusu/bosluklari sifirlanir. */ .pcard-ad{margin:0 0 6px; font-size:inherit; font-weight:inherit; line-height:inherit} /* Bolum basligi. Genislik ch DEGIL px ile sinirlanir: ch, kapsayicinin govde puntosuna gore olculur; baslik ise cok daha buyuk puntoyla cizildigi icin 68ch bir basligi gereksiz yere ust uste sarardi (olculdu: 1136 px govdenin yalnizca 620 px i kullaniliyordu). Baslik ve altindaki aciklama AYNI genislikte biter; paragraf daha dar kalirsa blok basamak gibi gorunur. */ .head{display:flex; flex-direction:column; gap:13px; margin-bottom:36px; max-width:900px} /* .lede kendi 62ch sinirini tasir; bolum basliginin altinda bu sinir kaldirilir, yoksa aciklama basliktan belirgin sekilde dar kalir. */ .head .lede{max-width:none} .head--center{align-items:center; text-align:center; margin-inline:auto} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:11px; border:1px solid transparent; font-weight:600; font-size:.93rem; letter-spacing:-.005em; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; } .btn:hover{transform:translateY(-1.5px)} /* * Satin alma dugmesi. * * --- Beyaz parlama neden UST SERITTE sinirli? --- * Zemin --buy-dolgu (#C05408) beyaz metinle 4.65:1 veriyor; WCAG esigi 4.5. * Yani nefes payi neredeyse yok: uzerine %8 beyaz eklense 4.10:1'e duser, * %14 eklense 3.71:1. Olculdu. Bu yuzden parlama, YAZININ BULUNMADIGI * ust %18'lik seride hapsedilir; metnin oturdugu orta bant hic acilmaz ve * okunabilirlik 4.65:1 olarak KORUNUR. * * Istenen "icinden beyaz gecen" etkisi ise ::after ile, uzerine gelindiginde * SUPUREN bir isik olarak verilir. Gecici oldugu ve kullanici o an okumadigi * icin kontrast sorunu yaratmaz. * * Gradyan --buy'dan baslamaz: acik uc (--buy-hi #F58A2E) beyaz metinle * 2.45:1 veriyordu, buyuk metin esigi olan 3.0'in bile altinda. */ .btn--buy{ position:relative; overflow:hidden; isolation:isolate; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 12%, rgba(255,255,255,0) 26%), linear-gradient(135deg, var(--buy-dolgu) 0%, var(--buy-dolgu) 30%, var(--buy-dolgu-koyu) 100%); color:#FFFFFF; font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 12px 24px -12px rgba(184,74,4,.62); } /* Supuren isik. pointer-events yok — tiklamayi engellemez. transform ile hareket eder, yani yerlesim hesabi tetiklemez. */ .btn--buy::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 62%); transform:translateX(-130%); transition:transform .6s cubic-bezier(.4,0,.2,1); } .btn--buy:hover{box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 18px 32px -14px rgba(184,74,4,.72)} .btn--buy:hover::after, .btn--buy:focus-visible::after{transform:translateX(130%)} @media (prefers-reduced-motion:reduce){ .btn--buy::after{transition:none} .btn--buy:hover::after{transform:translateX(-130%)} } .btn--line{border-color:var(--line-2); background:var(--surface); color:var(--text)} .btn--line:hover{border-color:var(--brand); color:var(--brand)} .btn--sm{padding:9px 15px; font-size:.85rem; border-radius:9px} .chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:.79rem; color:var(--text-2); font-weight:500; } .chip svg{width:14px; height:14px; flex:none; color:var(--brand)} .chip--promo{border-color:var(--buy-line); background:var(--buy-soft); color:var(--buy-text); font-family:var(--f-mono); font-size:.71rem; letter-spacing:.06em; text-transform:uppercase} .chip--win{border-color:var(--green); background:var(--green-soft); color:var(--green-text); font-family:var(--f-mono); font-size:.71rem; letter-spacing:.06em; text-transform:uppercase} /* Yapay zeka rozeti: paket kartinda ayrismayi tasir. Marka mavisinin koyu ucunu kullanir ki diger chip turleriyle karismasin. */ .chip--zeka{ align-self:flex-start; /* dikey esnek kaplarda genislige yayilmasin */ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-deep); font-weight:700; } /* * Paket kartinin sag ust kosesindeki yapay zeka rozeti. * * Sol ust kosede "Yeni surum" seridi (.pcard-flag) duruyor; bu yuzden rozet * saga tutturulur. Konumlandirma SARMALAYICIDA tutulur, .chip--zeka'da degil: * ayni rozet Paradaise sayfasinda normal bir cip seridi icinde de kullaniliyor, * orada mutlak konumlanmamali. */ .zrozet{ position:absolute; z-index:3; top:-13px; right:18px; display:flex; align-items:flex-end; } @media (max-width:560px){ /* Dar kartta rozet fiyatla carpismasin */ .zrozet{right:12px; top:-11px} } .chip--zeka svg{color:var(--brand)} .chip--info{border-color:var(--brand-lit); background:var(--brand-soft); color:var(--brand); font-family:var(--f-mono); font-size:.71rem; letter-spacing:.06em; text-transform:uppercase} .live{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--signal); font-weight:500} .live i{width:7px; height:7px; border-radius:50%; background:var(--signal); animation:pulse 1.9s infinite} @keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.82)}} .ic{ width:42px; height:42px; border-radius:11px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(155deg, var(--brand-soft), var(--surface-2)); border:1px solid var(--line); color:var(--brand); } .ic svg{width:20px; height:20px; display:block} /* ============ CARDS & GRIDS ============ */ .grid{display:grid; gap:18px} .g2{grid-template-columns:repeat(2, minmax(0,1fr))} .g3{grid-template-columns:repeat(3, minmax(0,1fr))} .g4{grid-template-columns:repeat(4, minmax(0,1fr))} @media (max-width:1000px){.g4{grid-template-columns:repeat(2, minmax(0,1fr))}} @media (max-width:940px){.g3{grid-template-columns:repeat(2, minmax(0,1fr))}} @media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-card); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card--hov:hover{border-color:var(--brand-lit); box-shadow:var(--shadow-lift); transform:translateY(-3px)} .card h2.bslk-kucuk,.card h3{margin-bottom:8px; margin-top:14px} .card p{color:var(--muted); font-size:.92rem} /* p{margin:0} genel bir sifirlama; kartta iki paragraf art arda gelince yapisik goruunuyordu. Bosluk yalnizca ARDISIK paragraflara verilir ki tek paragrafli kartlarda alt bosluk olusmasin. */ .card p + p{margin-top:11px} .card-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:.87rem; font-weight:600; color:var(--brand)} .card-link svg{width:14px; height:14px; transition:transform .16s ease} .card--hov:hover .card-link svg{transform:translateX(3px)} .ticklist{list-style:none; margin:0; padding:0; display:grid; gap:9px} /* Satir FLEX DEGIL akis icinde kalir. Flex iken satirdaki her metin parcasi ve her ayri bir flex ogesiydi; dar bir kartta her oge KENDI icinde sardigi icin "Port: 200 . 10000 / Mbit/s Trafik: GB" gibi dagilmis satirlar cikiyordu. Ikon mutlak konumlanir, metin normal satir akisiyla sarar. */ .ticklist li{ position:relative; padding-left:25px; font-size:.9rem; color:var(--text-2); line-height:1.5; } .ticklist svg{position:absolute; left:0; top:.28em; width:15px; height:15px; color:var(--green)} .save{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; background:var(--green-soft); border:1px solid var(--green); color:var(--green-text); font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.02em} .save svg{width:13px; height:13px; color:var(--green)} .ticklist--no li{color:var(--muted)} .ticklist--no svg{color:var(--line-2)} /* ============ TOPBAR + NAV ============ */ .topbar{background:linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 70%, var(--brand-lit) 100%); border-bottom:1px solid var(--brand-deep); color:rgba(241,247,252,.82)} .topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; font-size:.79rem; flex-wrap:wrap} .topbar a{display:inline-flex; align-items:center; gap:7px; color:rgba(241,247,252,.82); transition:color .15s ease} .topbar a:hover{color:#FFFFFF} .topbar svg{width:14px; height:14px} .topbar-l,.topbar-r{display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-width:0} @media (max-width:800px){.topbar .hide-sm{display:none}} .nav{position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--line); transition:box-shadow .2s ease} .nav.is-stuck{box-shadow:0 10px 28px -22px rgba(80,50,20,.55)} .nav .wrap{display:flex; align-items:center; gap:14px; min-height:70px; flex-wrap:nowrap} .brand{display:flex; align-items:center; gap:12px; flex:0 1 auto; min-width:0; margin-right:8px} .brand-mark{width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:linear-gradient(140deg, var(--brand-lit) 0%, var(--brand) 55%, var(--brand-deep) 100%); color:#FFFFFF; font-family:var(--f-display); font-weight:800; font-size:1.12rem; box-shadow:0 6px 14px -8px rgba(12,95,174,.85)} .brand-name{font-family:var(--f-display); font-weight:800; font-size:1.48rem; letter-spacing:-.042em; line-height:1; color:var(--text)} .brand-name span{color:var(--brand)} .brand-sub{display:block; font-family:var(--f-mono); font-size:.55rem; line-height:1; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:2px} .nav-links{display:flex; align-items:center; gap:4px; margin-left:auto} @media (max-width:1120px){.nav-links{display:none}} .nav-link{position:relative; padding:10px 13px; border:0; background:none; font-size:.9rem; font-weight:500; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; transition:color .15s ease; white-space:nowrap; cursor:pointer} .nav-link:hover{color:var(--brand)} .nav-link.is-on{color:var(--brand); font-weight:600} .nav-link.is-on::after{content:""; position:absolute; left:13px; right:13px; bottom:0; height:2px; border-radius:2px; background:var(--brand)} .nav-link svg{width:11px; height:11px; opacity:.6} .dd{position:relative} /* buton ile panel arasındaki boşluğu köprüle — fare geçerken menü kapanmasın */ .dd::after{content:""; position:absolute; top:100%; left:-10px; right:-10px; height:16px; display:none} .dd.is-open::after{display:block} .dd-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px); width:min(690px, 90vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lift); overflow:hidden; display:grid; grid-template-columns:200px 1fr; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s; } .dd.is-open .dd-panel, .dd:focus-within .dd-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)} .dd-aside{padding:20px 18px; background:linear-gradient(165deg, var(--brand-soft), var(--surface-2)); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:10px} /* Menu tanitim metni: eskiden

idi, belge yapisini bozdugu icin

oldu. Gorunum aynen korunuyor. */ .dd-aside .dd-panel-baslik{font-family:var(--f-display); font-weight:800; letter-spacing:-.01em; color:var(--text); margin:0; text-wrap:balance; font-size:1rem; line-height:1.24} .dd-aside p{font-size:.79rem; color:var(--muted); line-height:1.5} .dd-items{padding:10px; display:grid; gap:2px} .dd-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; transition:background-color .14s ease} .dd-item:hover{background:var(--surface-2)} .dd-item .ic{width:34px; height:34px; border-radius:9px} .dd-item .ic svg{width:16px; height:16px} .dd-item strong{display:block; font-size:.89rem; font-weight:600; letter-spacing:-.01em} .dd-item strong + span{display:block; font-size:.77rem; color:var(--muted); margin-top:2px; line-height:1.45} .burger{display:none; margin-left:auto; width:42px; height:42px; border:0; background:none; color:var(--text-2); align-items:center; justify-content:center; cursor:pointer; transition:color .15s ease} .burger:hover{color:var(--brand)} .burger svg{width:19px; height:19px} @media (max-width:1120px){.burger{display:inline-flex}} /* ============ MOBİL MENÜ ============ Sayfayi asagi iten bir liste DEGIL, sagdan gelen bir cekmece. Eskiden menu icerigin arasina giriyordu: 15 baglanti 806px yer kapliyor, 844px'lik ekranda sayfa ile menu ic ice geciyordu. Cekmece kendi icinde kayar, sayfa yerinde kalir. z-index 200: alt sabit bar (.altbar) 80'de duruyor, cekmece onun da ustunde olmali — yoksa menunun alt ucu bara giriyor. */ .mnav{ position:fixed; top:0; right:0; bottom:0; z-index:200; width:min(88vw, 380px); display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--line); box-shadow:-18px 0 46px rgba(2,20,42,.18); transform:translateX(101%); visibility:hidden; transition:transform .26s cubic-bezier(.32,.72,.35,1), visibility .26s; overscroll-behavior:contain; } .mnav.is-open{transform:none; visibility:visible} .mnav__bas{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); flex:0 0 auto; } .mnav__baslik{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)} .mnav__kapat{ width:40px; height:40px; border:0; background:none; cursor:pointer; color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; border-radius:10px; } .mnav__kapat:hover{background:var(--surface-2); color:var(--brand)} .mnav__kapat svg{width:20px; height:20px} /* Yalnizca bu bolum kayar; baslik ve dip sabit kalir. */ .mnav__govde{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 0} /* * HER UST DUZEY OGE AYNI SATIR BICIMI. * Acilir olan ile tekil olanin farki yalnizca sagdaki isarettir * (sevron / ok). Boylece hicbir oge digerinin alt basamagi gibi * gorunmez — eski duzendeki karisikligin sebebi tam olarak buydu. */ .mnav__satir{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:15px 18px; font-size:1rem; font-weight:600; color:var(--text); border-bottom:1px solid var(--line); cursor:pointer; list-style:none; } .mnav__satir::-webkit-details-marker{display:none} .mnav__satir:hover{background:var(--surface-2); color:var(--brand)} .mnav__satir svg{width:18px; height:18px; flex:0 0 auto; color:var(--muted); transition:transform .2s ease} .mnav__grup[open] > .mnav__satir{color:var(--brand); background:var(--brand-soft); border-bottom-color:transparent} .mnav__grup[open] > .mnav__satir .mnav__sevron{transform:rotate(180deg); color:var(--brand)} /* Alt baglantilar girintili ve bir tik kucuk — ust satira BAGLI olduklari buradan anlasilir. */ .mnav__ic{padding:4px 0 10px; background:var(--brand-soft); border-bottom:1px solid var(--line)} .mnav__cocuk{ display:block; padding:11px 18px 11px 16px; margin-left:18px; font-size:.93rem; font-weight:500; color:var(--text-2); border-left:2px solid var(--line-2); } .mnav__cocuk:hover{color:var(--brand); border-left-color:var(--brand)} .mnav__cocuk--tumu{font-weight:600; color:var(--brand)} .mnav__dip{ flex:0 0 auto; padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:14px; } /* Cizgili dugme: dolu turuncu blok menunun dibinde fazla bagiriyordu. Ince kenarlik + marka mavisi ayni isi daha sakin yapiyor. */ .mnav__panel{ display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--brand); color:var(--brand); font-weight:600; font-size:.95rem; } .mnav__panel:hover{background:var(--brand); color:#FFFFFF} .mnav__panel svg{width:16px; height:16px} .mnav__iletisim{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center} .mnav__iletisim-bas{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .mnav__tel{ display:inline-flex; align-items:center; gap:7px; font-size:1.02rem; font-weight:700; color:var(--text); } .mnav__tel:hover{color:var(--brand)} .mnav__tel svg{width:15px; height:15px; color:var(--brand)} .mnav__saat{font-size:.78rem; color:var(--muted)} .mnav-perde{ position:fixed; inset:0; z-index:190; border:0; padding:0; cursor:pointer; background:rgba(6,22,40,.5); opacity:0; visibility:hidden; transition:opacity .26s ease, visibility .26s; } .mnav-perde.is-open{opacity:1; visibility:visible} body.mnav-acik{overflow:hidden} @media (prefers-reduced-motion:reduce){ .mnav,.mnav-perde{transition:none} } @media (min-width:1121px){ .mnav,.mnav-perde{display:none !important} } /* ============ HERO ============ */ .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(160deg, var(--surface) 0%, var(--tint) 58%, var(--paper) 100%)} /* sol üstte nokta deseni */ .hero::before{content:""; position:absolute; left:-10px; top:24px; width:180px; height:200px; pointer-events:none; background-image:radial-gradient(circle, var(--line-2) 1.6px, transparent 1.7px); background-size:17px 17px; opacity:.7; mask-image:linear-gradient(135deg,#000,transparent 78%); -webkit-mask-image:linear-gradient(135deg,#000,transparent 78%)} .hero .wrap{position:relative; z-index:1; padding-block:52px 58px} /* Gorsel sutunu .78fr -> 1.05fr ve bosluk 46 -> 40px. Yeni hero gorseli 3:2; eski kare gorselle ayni genislikte cizilince ekranda belirgin sekilde kucuk kaliyordu. Metin sutunu yine ~555px, basligin en uzun satiri 415px — sikismiyor. */ .hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center} @media (max-width:1120px){.hero-grid{grid-template-columns:1fr; gap:34px}} .hero-title{font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:16px 0 0} .hero-title span{display:block} .t-pct{font-size:clamp(2.7rem, 1.4rem + 4.6vw, 4.4rem); color:var(--brand)} .t-ink{font-size:clamp(2.05rem, 1.1rem + 3.2vw, 3.25rem); color:var(--text); margin-top:2px} .t-blue{font-size:clamp(1.7rem, 1rem + 2.4vw, 2.55rem); color:var(--brand); font-weight:700; margin-top:4px} .hero-rule{width:132px; height:4px; border-radius:3px; margin-top:22px; background:linear-gradient(90deg, var(--brand), var(--brand-lit) 60%, transparent)} .hero-lede{color:var(--text-2); font-size:1.02rem; max-width:46ch; line-height:1.65; margin-top:20px} .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px} /* dört güven rozeti */ .badges{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:28px; max-width:520px} @media (max-width:900px){.badges{grid-template-columns:repeat(4,1fr); max-width:100%}} @media (max-width:560px){.badges{grid-template-columns:repeat(2,1fr)}} .badge{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px 11px 13px; text-align:center; box-shadow:var(--shadow-card); transition:border-color .18s ease, transform .18s ease} .badge:hover{border-color:var(--brand-lit); transform:translateY(-2px)} .badge svg{width:26px; height:26px; color:var(--brand); margin:0 auto 9px; display:block} .badge b{display:block; font-size:.775rem; font-weight:600; line-height:1.35; color:var(--text)} /* ürün görseli — şeffaf zeminli cihaz kompozisyonu */ .shotbox{position:relative; isolation:isolate; max-width:470px; margin-inline:auto; width:100%; animation:rise .9s cubic-bezier(.2,.7,.3,1) .12s both, drift 8s ease-in-out 1.2s infinite; transition:transform .35s ease} .shotbox::before{content:""; position:absolute; inset:18% 5% 4%; z-index:-1; border-radius:50%; background:radial-gradient(56% 52% at 46% 58%, rgba(21,128,208,.26), transparent 72%); filter:blur(44px)} .shotbox img{display:block; width:100%; height:auto} /* 470px siniri .shotbox'in KENDISINDE kalir — ayni sinif klasik, paradaise ve haber-yazilimi sayfalarinda da kullaniliyor, oralarda gorsel kare ve 470 dogru olcu. Buyutme YALNIZCA ana sayfa hero'suna kapsanir. */ .hero-grid .shotbox{max-width:600px} .shotbox:hover{transform:translateY(-5px)} @keyframes rise{from{opacity:0; transform:translateY(26px) scale(.98)} to{opacity:1; transform:none}} @keyframes drift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}} /* ============ STATS ============ */ .stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} @media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}} .stat{background:var(--surface); padding:22px 20px; display:flex; flex-direction:column; gap:5px} .stat b{font-family:var(--f-display); font-size:1.85rem; font-weight:800; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums} .stat span{font-size:.82rem; color:var(--muted)} /* ============ PRICE ============ */ .price-old{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; font-family:var(--f-mono); font-size:.9rem} .price-now{font-family:var(--f-display); font-weight:800; letter-spacing:-.04em; font-size:2.25rem; line-height:1; font-variant-numeric:tabular-nums} .price-unit{font-family:var(--f-mono); font-size:.74rem; color:var(--muted); letter-spacing:.03em; line-height:1.5} .price-sub{font-family:var(--f-mono); font-size:.87rem; color:var(--buy-text); font-weight:600; font-variant-numeric:tabular-nums} .pcard{position:relative; display:flex; flex-direction:column; gap:15px} .pcard--best{border-color:var(--buy); border-width:2px; box-shadow:var(--shadow-lift)} .pcard--top{border-color:var(--line-2); background:linear-gradient(170deg, var(--surface-2), var(--surface))} .pcard-flag{position:absolute; top:-11px; left:22px; padding:4px 11px; border-radius:999px; background:linear-gradient(135deg,var(--buy-dolgu),var(--buy-dolgu-koyu)); color:#FFFFFF; font-family:var(--f-mono); font-size:.635rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500} .pcard-top{display:flex; flex-direction:column; gap:5px; padding-bottom:15px; border-bottom:1px dashed var(--line-2)} .srv{display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); border:1px solid var(--brand-lit); background:var(--brand-soft); padding:2px 8px; border-radius:5px} /* ============ TABLE ============ */ .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)} table{width:100%; border-collapse:collapse; min-width:600px} th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:.885rem} /* Baslik rengi --muted degil --text-2: 11px buyuk harf yazi normal metin sayilir ve 4.5:1 ister; --muted #EFF5FA uzerinde 4.25:1 kaliyordu. */ /* Yalnizca SUTUN basliklari (thead) kucuk-buyuk harf bicimini alir. Satir basliklari (th scope="row") govdededir ve normal hucre gibi gorunmelidir; aksi halde tabloya anlamsal dogruluk kazandirmak gorunumu bozar. */ thead th{font-family:var(--f-mono); font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); font-weight:500; background:var(--surface-2)} tbody th{font-weight:inherit; text-align:left; background:transparent} tbody tr:last-child td{border-bottom:0} tbody tr:hover td,tbody tr:hover th{background:var(--surface-2)} td.num,th.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap} /* tutar ve para birimi ayni satirda kalsin */ td strong{font-weight:600} .tag{font-family:var(--f-mono); font-weight:500; color:var(--brand); font-size:.85rem} /* ============ COMPARE ============ */ .cmp{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)} @media (max-width:760px){.cmp{grid-template-columns:1fr}} .cmp-h{padding:16px 20px; font-family:var(--f-mono); font-size:.71rem; letter-spacing:.11em; text-transform:uppercase; border-bottom:1px solid var(--line)} .cmp-h.a{color:var(--muted); background:var(--surface-2)} .cmp-h.b{color:var(--brand); background:linear-gradient(90deg, var(--brand-soft), var(--surface))} .cmp-col{border-right:1px solid var(--line)} @media (max-width:760px){.cmp-col{border-right:0; border-bottom:1px solid var(--line)}} .cmp-cell{padding:16px 20px; border-bottom:1px solid var(--line); font-size:.89rem; line-height:1.55} .cmp-cell:last-child{border-bottom:0} .cmp-col.a .cmp-cell{color:var(--muted)} .cmp-col.b .cmp-cell strong{display:block; font-weight:600; margin-bottom:3px} /* ============ STEPS ============ */ .steps{display:grid; counter-reset:s} .step{display:grid; grid-template-columns:60px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line)} .step:last-child{border-bottom:0} .step-n{counter-increment:s; font-family:var(--f-mono); font-size:.76rem; color:var(--brand); letter-spacing:.07em; padding-top:3px} .step-n::before{content:"0" counter(s)} .step h3.bslk-kucuk,.step h4{margin-bottom:5px; font-size:1.02rem} .step p{color:var(--muted); font-size:.91rem} /* ============ FAQ ============ */ /* Sorular tek bir kartin icinde sac teli cizgilerle ayriliyordu; kirk dokuz sorunun oldugu sayfada bu bir beyaz duvara donuyordu. Her soru artik KENDI KARTINDA duruyor, arasinda bosluk var ve solunda sira numarasi bulunuyor. Acik olan soru zeminden ve kenar seridinden belli olur — okuyucu nerede kaldigini kaybetmez. */ .faq{display:grid; gap:10px; counter-reset:sss} .faq details{ position:relative; overflow:hidden; counter-increment:sss; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:border-color .16s ease, box-shadow .16s ease; } .faq details:hover{border-color:var(--line-2)} .faq details[open]{ border-color:var(--brand-lit); box-shadow:var(--shadow-card); } /* Acik sorunun sol kenarinda marka seridi */ .faq details[open]::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--brand-lit), var(--brand-deep)); } .faq summary{ position:relative; display:flex; align-items:center; gap:14px; padding:16px 20px 16px 58px; cursor:pointer; list-style:none; font-weight:600; font-size:.94rem; line-height:1.45; color:var(--text); } .faq summary::-webkit-details-marker{display:none} /* Sira numarasi: 01, 02, 03 ... her bolumde bastan baslar. */ .faq summary::before{ content:counter(sss, decimal-leading-zero); position:absolute; left:18px; top:50%; transform:translateY(-50%); font-family:var(--f-mono); font-size:.76rem; font-weight:700; color:var(--muted); letter-spacing:.02em; } .faq details[open] summary::before{color:var(--brand)} /* Ac/kapa isareti daire icinde */ .faq summary::after{ content:"+"; display:grid; place-items:center; flex:none; width:26px; height:26px; margin-left:auto; border-radius:50%; background:var(--brand-soft); color:var(--brand-deep); font-family:var(--f-mono); font-size:1.05rem; line-height:1; transition:transform .18s ease, background .16s ease, color .16s ease; } .faq details[open] summary::after{transform:rotate(45deg); background:var(--brand); color:#fff} .faq summary:hover{background:var(--surface-2)} .faq details[open] summary{background:var(--tint)} .faq details[open] summary:hover{background:var(--tint)} /* Cevap metni kartin TAM genisligini kullanir. Onceki 80ch siniri, 1140 px lik kartin yalnizca 620 px ini dolduruyor, sagda genis bir bosluk birakiyordu. Satir uzadigi icin metin rengi --muted'dan --text-2'ye cekildi ve satir araligi acildi: uzun satirda soluk ve sik metin, gozun satir basini kaybetmesine yol acar. */ .faq-a{padding:16px 20px 18px 58px; color:var(--text-2); font-size:.9rem; line-height:1.68; border-top:1px solid var(--line)} .faq-a a{color:var(--brand-deep); font-weight:600} .faq-a a:hover{color:var(--brand)} @media (max-width:620px){ .faq summary{padding-left:20px; padding-right:16px} .faq summary::before{position:static; transform:none; margin-right:2px} .faq-a{padding-left:20px} } @media (prefers-reduced-motion:reduce){ .faq details,.faq summary::after{transition:none} } /* ============ CTA BAND (amber) ============ */ .band{position:relative; overflow:hidden; border-block:1px solid var(--brand-deep); background:linear-gradient(118deg, var(--brand-deep) 0%, var(--brand) 52%, var(--brand-lit) 100%)} .band .wrap{position:relative; padding-block:48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap} .band h2{color:#FFFFFF; max-width:21ch} .band p{color:rgba(241,247,252,.86); margin-top:9px; max-width:48ch; font-size:.97rem} .band .eyebrow{color:#9FD2F5} .band .eyebrow::before{background:var(--buy-hi)} .band-act{display:flex; gap:12px; flex-wrap:wrap} .btn--onband-line{border-color:rgba(255,255,255,.42); color:#FFFFFF; background:rgba(255,255,255,.08)} .btn--onband-line:hover{border-color:#FFFFFF; background:rgba(255,255,255,.18); color:#FFFFFF} /* ============ FOOTER (açık) ============ */ /* * Alt bilgi KOYU zeminlidir. * * Eskiden --surface-2 (#EFF5FA) kullaniyordu ve sayfa zemininden neredeyse * ayrismiyordu; sayfa altta "bitmemis" gibi duruyordu. Koyu zemin sayfayi * kapatir ve yapay zeka bolumuyle ayni --ink ailesini kullandigi icin site * bastan sona ayni dili konusur. * * Renkler SABIT DEGIL belirtecten gelir; karanlik temada --ink daha da * koyulasir, metin belirtecleri ayni kalir, kontrast korunur. * * Kontrast (WCAG AA 4.5:1): * --ink-text #F1F7FC / --ink #0A2337 -> 15.6:1 * --ink-muted #9DB6CC / --ink #0A2337 -> 7.3:1 * #5FB8F5 (bag ustu) -> 7.2:1 * DIKKAT: --brand (#0C5FAE) bu zeminde 2.4:1 kalir; METIN RENGI OLARAK * KULLANILMAZ, yalnizca dolgu/kenarlik olarak gecer. */ .foot{ background:var(--ink); color:var(--ink-muted); border-top:3px solid var(--brand); } .foot .alt-baslik{color:var(--ink-text)} .foot a{color:var(--ink-muted)} .foot a:hover{color:#5FB8F5} .foot address{color:var(--ink-muted)} /* Yazili marka koyu zeminde okunur kalsin */ .foot .brand-name{color:var(--ink-text)} .foot .brand-name span{color:#5FB8F5} .foot .brand-sub{color:var(--ink-muted)} /* * Logoyu sutun basliklariyla AYNI HIZAYA cek. * * Logo dosyasinin ustunde saydam bir bant var: murekkep, goruntunun * tepesinden %18,1 asagida basliyor. Bu yuzden logo, yanindaki * "HABER YAZILIMI / HIZMETLERIMIZ..." basliklarindan daha asagi * dusuyordu. Sutun basliklarinin kendi yarim satir boslugu ise 3,5 px. * * Kaydirma iki terimden kurulur: goruntunun saydam bandi kadar YUKARI, * basligin yarim satir boslugu kadar GERI. Boylece logo yuksekligi * panelden degistirilse bile hiza kendiliginden korunur. */ .foot .brand-logo{margin-top:calc(var(--logo-h, 42px) * -0.181 + 3.5px)} @media (max-width:760px){ /* Bu genislikte .brand-logo yuksekligi .82 ile carpiliyor; kaydirma da ayni oranda kucultulur, yoksa logo fazla yukari kacar. */ .foot .brand-logo{margin-top:calc(var(--logo-h, 42px) * .82 * -0.181 + 3.5px)} } .foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-block:48px} @media (max-width:1000px){.foot-top{grid-template-columns:repeat(2,1fr); gap:28px}} @media (max-width:560px){.foot-top{grid-template-columns:1fr}} /* Footer bolum basliklari. Etiket h5 idi; belge yapisinda h2 -> h5 atlamasi oluyordu, h2 yapildi. h2 varsayilani buyuk oldugu icin tum ozellikler burada aciktan veriliyor — gorunum oncekiyle birebir ayni. RENK: koyu zemin degiskeni kullanilir. Burada var(--text) yaziyordu; o acik temanin murekkebi (#0F2438) ve alt bilgi zemini (#0A2337) neredeyse ayni ton oldugu icin basliklar gorunmez oluyordu — ustelik bu kural yukaridaki dogru rengi ayni ozgullukle eziyordu. */ .foot .alt-baslik{font-family:var(--f-mono); font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-text); margin:0 0 14px; font-weight:600; line-height:1.4} .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .foot a{font-size:.875rem; transition:color .15s ease} .foot-brand p{font-size:.875rem; line-height:1.62; margin-top:13px; max-width:36ch} .foot-bottom{border-top:1px solid var(--ink-line); padding-block:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.79rem} .foot-note{font-family:var(--f-mono); font-size:.67rem; letter-spacing:.04em; color:var(--ink-muted)} /* ============ MISC ============ */ .split{display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center} @media (max-width:880px){.split{grid-template-columns:1fr; gap:30px}} /* * Surec seridi. * * Kartlarin ARKASINDAN yatay bir ray gecer; kartlar opak oldugu icin ray * yalnizca aralardaki bosluklarda gorunur ve adimlarin birbirine bagli * oldugunu anlatir. Her bosluga da bir ok ucu konur. * * Ray yalnizca kartlar TEK SIRADAYKEN anlamlidir; iki ya da tek sutuna * dustugunde (dar ekran) hem ray hem oklar gizlenir, yoksa yana dogru * akmayan bir surecte yatay ok saskinlik yaratir. */ .flowline{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative} .flowline::before{ content:""; position:absolute; z-index:0; left:12%; right:12%; top:50%; height:2px; margin-top:-1px; background:var(--line-2); } @media (max-width:860px){ .flowline{grid-template-columns:repeat(2,1fr); gap:12px} .flowline::before{display:none} } @media (max-width:480px){.flowline{grid-template-columns:1fr}} .flownode{ position:relative; z-index:1; border:1px solid var(--line); border-radius:13px; padding:17px; background:var(--surface); box-shadow:var(--shadow-card); } /* Beyaz zeminli bolumde kart da beyaz kalirsa ayrismaz; kartlar bir ton koyulasir. Diger bolumlerde kart beyaz kalmaya devam eder. */ .sec--beyaz .flownode{background:var(--paper)} /* * Adimlar arasindaki gecis dugumu. * * Ciplak bir ok isareti bosluga birakilmis gibi duruyordu; daire icine * alininca rayin uzerindeki bilincli bir DURAK gibi okunuyor. Kurumsal * yazilim sitelerinin kullandigi duzen budur. * * ::before daireyi, ::after okun kendisini cizer. Ikisi de bosluga TAM * ortalanir: sol kenar karttan 11px sagda (bosluk 22px), sonra kendi * genisliginin yarisi kadar geri cekilir. */ .flownode:not(:last-child)::before, .flownode:not(:last-child)::after{ content:""; position:absolute; left:calc(100% + 11px); top:50%; transform:translate(-50%, -50%); } .flownode:not(:last-child)::before{ z-index:2; width:24px; height:24px; border-radius:50%; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 1px 2px rgba(15,40,70,.07); } .flownode:not(:last-child)::after{ z-index:3; width:11px; height:11px; background:var(--brand); -webkit-mask:var(--ok-sag) center/contain no-repeat; mask:var(--ok-sag) center/contain no-repeat; } @media (max-width:860px){ .flownode:not(:last-child)::before, .flownode:not(:last-child)::after{display:none} } .flownode .k{font-family:var(--f-mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brand)} .flownode h3{margin:9px 0 6px; font-size:.97rem; letter-spacing:-.01em} .flownode p{font-size:.85rem; color:var(--muted); line-height:1.5} .notice{border:1px solid var(--brand-lit); background:var(--brand-soft); border-radius:var(--radius); padding:17px 20px; display:flex; gap:13px; align-items:flex-start} .notice svg{width:19px; height:19px; flex:none; color:var(--brand); margin-top:2px} .notice--warn{border-color:var(--buy-line); background:var(--buy-soft)} .notice--warn svg{color:var(--buy)} .notice p{font-size:.885rem; line-height:1.6; color:var(--text-2)} .notice strong{font-weight:600; color:var(--text)} .notice--plain{border-color:var(--line); background:var(--surface)} /* Ust bardan sonra YALNIZCA gri cizgi gelir. Burada bir de 3 px mavi serit vardi; ana sayfada pagehead olmadigi icin o serit yoktu ve iki sayfa turu farkli gorunuyordu. Standart: gri cizgi. */ .pagehead{background:linear-gradient(180deg, var(--tint), var(--surface-2)); border-bottom:1px solid var(--line)} .pagehead .wrap{padding-block:40px 38px} /* Baslik kirilma yoluna cok yakin duruyordu; ust bosluk 15 -> 26px, ust sinir 2.8 -> 2.6rem. Hiyerarsi korunur, nefes payi acilir. */ .pagehead h1{font-size:clamp(1.8rem,1.2rem+2vw,2.6rem); margin-block:26px 13px} /* Sayfa basligi altindaki giris metni, govde metninden DAHA GENIS akar. Genel .lede kurali 62ch ile sinirli — okuma olcusu icin dogru deger o, ama sayfa basliginda kisa bir paragraf dort satira boluniyordu. Burada 108ch: uzun bir giris iki satira sigar, satir yine de ekran genisligi kadar uzamaz. */ .pagehead .lede{max-width:min(112ch, 100%)} /* Kirilma yolu artik