/* ══════════════ CİROMETRE — TASARIM SİSTEMİ (prototip) ══════════════ Yapı: ORTAK KABUK (üst şerit + ana menü) + sayfaya göre değişen gövde. Arayüz görselleri ekran görüntüsü DEĞİL, CSS ile çizilir — landing ölçeğinde okunur kalsın diye (referans: cironet.com.tr, entegrabilisim.com). Renkler ve font markadan: Poppins, lacivert #052c65, turuncu #e96a33 (ikisi de logodan örneklendi). */ :root { --lacivert: #052c65; --lacivert-900: #041e47; --lacivert-700: #073a80; --lacivert-600: #1c4a92; --turuncu: #e96a33; /* logodan örneklendi; eski #fd7e14 daha sarı ve %98 doygunluktaydı, gözü yoruyordu */ --turuncu-koyu: #c9531f; --yesil: #0d8a4f; --kirmizi: #d93a3a; --metin: #3d4b60; --soluk: #7b8798; --cizgi: #e4e9f2; --zemin: #f6f8fc; /* ürün aksanları — ürün sayfaları bunları devralır */ --urun: var(--lacivert); --urun-koyu: var(--lacivert-900); /* VURGU = ürün sayfalarındaki çağrı rengi (düğme, rozet noktası, em). Doğrudan ÜRÜN RENGİ: kârlılık lacivert, ön muhasebe yeşil, Amazon turuncu. Şemsiye sayfayla uyum için böyle (kullanıcı kararı 2026-09-25); önce turuncu sabitlenmişti, her ürün sayfasında aynı turuncu düğme markayı değil tek bir ürünü anlatıyordu. */ --vurgu: var(--urun); --vurgu-koyu: var(--urun-koyu); --r-kart: 16px; --r-dugme: 10px; --r-rozet: 999px; --golge-1: 0 1px 2px rgba(5,44,101,.06), 0 8px 20px rgba(5,44,101,.06); --golge-2: 0 2px 4px rgba(5,44,101,.06), 0 18px 40px rgba(5,44,101,.10), 0 48px 90px rgba(5,44,101,.10); } * { margin:0; padding:0; box-sizing:border-box } body { font-family:Poppins,system-ui,sans-serif; color:var(--lacivert); -webkit-font-smoothing:antialiased; background:#fff } a { color:inherit; text-decoration:none } .kap { max-width:1240px; margin:0 auto; padding:0 32px } /* ══════════ ORTAK KABUK ══════════ */ /* 1) üst şerit — ürünler arası geçiş, her sayfada. Ortalı: sağdaki iletişim bloğuyla dengelensin diye nav mutlak konumla ortalanıyor, şeridin genişliğinden bağımsız tam ortada duruyor. Seçili ürün altı çizili değil, dolgulu hap — sekme hissi verip alttaki ikinci şeridi gereksiz kılıyor (o şerit kaldırıldı). */ .serit { position:relative; background:var(--lacivert-900); color:#c6d4ec; font:500 13px/1 Poppins } .serit .kap { display:flex; align-items:center; justify-content:flex-end; height:46px } .serit nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px } .serit nav a { padding:7px 14px; border-radius:999px; transition:background .16s ease, color .16s ease } .serit nav a:hover { color:#fff; background:rgba(255,255,255,.08) } .serit nav a.aktif { color:#fff; background:rgba(255,255,255,.14); font-weight:600 } .serit nav i { width:3px; height:3px; border-radius:50%; background:#44608f; display:block; margin:0 2px } .serit .sag { display:flex; gap:20px; align-items:center; font-size:12.5px } .dil { display:flex; gap:2px; background:rgba(255,255,255,.08); border-radius:8px; padding:3px } .dil a { padding:5px 10px; border-radius:6px; font:600 12px/1 Poppins; color:#c6d4ec } .dil a.aktif { background:rgba(255,255,255,.16); color:#fff } @media (max-width:1100px) { .serit nav { position:static; transform:none } .serit .kap { justify-content:space-between } } /* 2) ana menü — BEYAZ. Logo lacivert + turuncu ve şeffaf zeminli; lacivert menüde okunmuyordu. Menü beyaz olunca logo tam kontrastta oturuyor, turuncu butonlar boğulmuyor ve ürün aksan renkleri (lacivert / yeşil / turuncu) birbirinden ayrışıyor. Marka rengi kaybolmasın diye lacivert üstteki ince şeritte kalıyor. */ .menu { background:#fff; color:var(--lacivert); position:sticky; top:0; z-index:40; border-bottom:1px solid var(--cizgi) } .menu.kaydi { box-shadow:0 2px 12px rgba(5,44,101,.08) } .menu .kap { display:flex; align-items:center; gap:34px; height:74px } .marka { display:flex; align-items:center; flex:none } .marka img { display:block; height:30px; width:auto } footer .marka img { height:26px } .menu nav { display:flex; gap:24px; align-items:center; font:500 14.5px/1 Poppins; flex:1 } .menu nav a { color:var(--lacivert); opacity:.76; padding:27px 0; border-bottom:2px solid transparent; transition:opacity .16s ease } .menu nav a:hover { opacity:1; border-bottom-color:var(--lacivert-600) } .menu .islem { display:flex; gap:12px; align-items:center } /* Hamburger yalnız dar ekranda görünür; masaüstü düzeni değişmez. */ /* Mobil hesaplayıcı kısayolu — yalnız dar ekranda. Masaüstünde menüdeki vurgulu madde zaten duruyor, ikisi birden tekrar olurdu. */ .menu-hesap { display:none } .mobil-ac { display:none; margin-left:auto; background:none; border:0; cursor:pointer; width:42px; height:42px; padding:10px; flex:none; border-radius:10px } .mobil-ac span { display:block; height:2px; border-radius:2px; background:var(--lacivert); transition:transform .2s cubic-bezier(.23,1,.32,1), opacity .14s ease-out } .mobil-ac span + span { margin-top:5px } .menu.gezinme-acik .mobil-ac span:nth-child(1) { transform:translateY(7px) rotate(45deg) } .menu.gezinme-acik .mobil-ac span:nth-child(2) { opacity:0 } .menu.gezinme-acik .mobil-ac span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) } .dugme { display:inline-flex; align-items:center; gap:9px; border-radius:var(--r-dugme); padding:13px 22px; font:600 14.5px/1 Poppins; transition:transform .16s ease, box-shadow .16s ease } .dugme:active { transform:scale(.98) } /* Adresi henüz olmayan düğme: görünür ama tıklanmaz (bkz. site.js `demoEn`). Ölü bir bağlantı koymak yerine bu — "yakında" rozetiyle aynı mantık, var olmayan şeye bağlantı verilmiyor ama düğme de gizlenmiyor. DEĞİL olarak basılıyor, o yüzden :active büyümesi de olmuyor. */ .dugme.pasif-dugme { color:var(--soluk); border-color:var(--cizgi); cursor:default } /* uppercase: Türkçe bir sayfada kullanılırsa bloğa lang="en" verilmeli, yoksa `i` harfi Türkçe `İ`ye dönüyor ("CAMPAİGN" hatası bir kez çıktı — bkz. CLAUDE.md). Şu an yalnız /en sayfasında kullanılıyor (lang="en"). */ .dugme.pasif-dugme .yakinda { padding:2px 7px; font-size:9.5px; text-transform:uppercase } .dugme.birincil { background:var(--turuncu); color:#fff; box-shadow:0 8px 18px rgba(233,106,51,.24) } .dugme.ikincil { background:#fff; color:var(--lacivert); border:1.5px solid #cfd9e8 } .dugme.ikincil:hover { border-color:var(--lacivert-600) } .dugme.acik { background:var(--urun); color:#fff; box-shadow:0 8px 20px rgba(5,44,101,.22) } .dugme.cerceve { background:#fff; color:var(--lacivert); border:1.5px solid #cfd9e8 } .dugme.buyuk { padding:15px 26px; font-size:15px } /* ══════════ GÖVDE ORTAK PARÇALAR ══════════ */ .rozet { display:inline-flex; align-items:center; gap:8px; background:#fff3e6; color:#b25a06; border:1px solid #ffddb8; border-radius:var(--r-rozet); padding:7px 16px; font:600 13px/1 Poppins } .rozet i { width:6px; height:6px; border-radius:50%; background:var(--turuncu) } .ustbaslik { font:600 13px/1 Poppins; letter-spacing:.14em; text-transform:uppercase; color:var(--urun) } h1 { font:700 clamp(36px,3.4vw,52px)/1.13 Poppins; letter-spacing:-.025em; margin:18px 0 0 } h1 em { font-style:normal; color:var(--turuncu) } h2 { font:700 clamp(28px,2.4vw,38px)/1.2 Poppins; letter-spacing:-.02em } .alt { font:400 17.5px/1.65 Poppins; color:var(--metin); margin-top:18px; max-width:32em } .alt b { font-weight:600; color:var(--lacivert) } .cta { display:flex; gap:13px; margin-top:30px; flex-wrap:wrap } .guven { display:flex; gap:20px; margin-top:22px; font:500 13.5px/1 Poppins; color:var(--soluk); flex-wrap:wrap } .guven span { display:inline-flex; align-items:center; gap:7px } .guven svg { width:15px; height:15px; color:var(--yesil) } /* istatistik şeridi (Entegra'daki gibi) */ /* Üç rakam yan yana: 56px sabit boşluk 320px ekranda taşıyordu (iPhone SE). Boşluk genişliğe bağlandı, sarmalama da güvenlik ağı olarak açık. */ .sayilar { display:flex; flex-wrap:wrap; gap:26px clamp(22px,5vw,56px); margin-top:38px; padding-top:26px; border-top:1px solid var(--cizgi) } .sayilar b { display:block; font:700 30px/1 Poppins; letter-spacing:-.02em; color:var(--urun) } .sayilar span { font:400 13px/1.4 Poppins; color:var(--soluk); margin-top:6px; display:block } /* ══════════ CSS İLE ÇİZİLMİŞ ARAYÜZ ══════════ */ .pencere { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); box-shadow:var(--golge-2); overflow:hidden } .pencere .cubuk { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#f9fbfe; border-bottom:1px solid var(--cizgi) } .pencere .cubuk i { width:11px; height:11px; border-radius:50%; background:#e3e8f0 } .pencere .cubuk .adres { flex:1; margin-left:10px; height:26px; border-radius:7px; background:#fff; border:1px solid var(--cizgi); font:400 12px/26px Poppins; color:#9aa6b8; padding:0 12px } .kartlar { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px } .dkart { border:1px solid var(--cizgi); border-radius:12px; overflow:hidden } .dkart .bas { padding:10px 14px; color:#fff; font:600 13px/1.3 Poppins; display:flex; justify-content:space-between; align-items:baseline; background:var(--urun) } .dkart .bas small { font:400 11px/1 Poppins; opacity:.82 } .dkart.ikinci .bas { background:var(--urun-koyu) } .dkart .ic { padding:14px } .satir { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; font:400 12.5px/1 Poppins; color:var(--metin) } .satir b { font:600 12.5px/1 Poppins; color:var(--lacivert) } .satir.eksi b { color:var(--kirmizi) } .buyuk { font:700 24px/1 Poppins; letter-spacing:-.02em; margin:2px 0 14px } .etiket { font:500 11px/1 Poppins; color:var(--soluk); text-transform:uppercase; letter-spacing:.08em } .ayrac { height:1px; background:var(--cizgi); margin:12px 0 } .netkar { display:flex; justify-content:space-between; align-items:baseline } .netkar b { font:700 19px/1 Poppins; color:var(--yesil) } /* tablo görünümü (muhasebe / amazon sayfaları) */ .tablo { padding:18px } .tablo .bas, .tablo .sat { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:10px; padding:11px 12px; align-items:center } .tablo .bas { font:600 11px/1 Poppins; color:var(--soluk); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--cizgi) } .tablo .sat { font:400 13px/1 Poppins; color:var(--metin); border-bottom:1px solid #f1f4f9 } .tablo .sat b { font-weight:600; color:var(--lacivert) } .tablo .sat .ye { color:var(--yesil); font-weight:600 } .tablo .sat .kr { color:var(--kirmizi); font-weight:600 } /* ══════════ ANA SAYFA HERO: NAKİT TAKVİMİ (çizim) ══════════ Ön muhasebe sekmesinin görseli. Gerçek ekran görüntüsü denendi ve geri alındı (2026-10-04): panelin yoğun, küçük puntolu grisi landing'in tipografisiyle uyuşmuyor. Burada punto büyük, satır az, renk markanın kendi paleti — ürün aksanı ön muhasebede YEŞİL. */ .nk { padding:18px 18px 20px } .nk-bas { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 2px 14px } .nk-bas b { font:600 17px/1.2 Poppins; color:var(--lacivert) } .nk-bas span { font:400 12.5px/1 Poppins; color:var(--soluk) } .nk-kartlar { display:grid; grid-template-columns:repeat(4,1fr); gap:10px } .nk-kartlar > div { background:var(--zemin); border:1px solid var(--cizgi); border-radius:12px; padding:12px 13px; display:flex; flex-direction:column; gap:4px; min-width:0 } .nk-kartlar small { font:500 11.5px/1.2 Poppins; color:var(--soluk) } .nk-kartlar b { font:600 19px/1.15 Poppins; color:var(--lacivert); letter-spacing:-.01em; white-space:nowrap } .nk-kartlar i { font:400 11.5px/1 Poppins; font-style:normal; color:var(--soluk) } .nk-kartlar .ye { color:var(--yesil) } .nk-kartlar .kr { color:var(--kirmizi) } .nk-grafik { margin:14px 0 4px; padding:12px 13px 8px; border:1px solid var(--cizgi); border-radius:12px } .nk-grafik svg { display:block; width:100%; height:78px } .nk-eksen { display:flex; justify-content:space-between; padding-top:7px; font:400 11px/1 Poppins; color:var(--soluk) } /* Satır ızgarası kartlarla aynı hizada değil, kendi işini yapıyor: tarih dar, cari geniş, tutar ve bakiye sağa yaslı. Bakiye KALIN çünkü ekranın asıl cevabı o — "o gün kasada ne kalıyor". */ .nk-liste { margin-top:12px } .nk-bs, .nk-st { display:grid; grid-template-columns:56px minmax(0,1.5fr) minmax(0,1.3fr) 1fr 1fr; gap:10px; align-items:center; padding:10px 4px } .nk-bs { font:600 10.5px/1 Poppins; color:var(--soluk); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--cizgi); padding-top:0 } /* Tutar ve bakiye sağa yaslı; başlıkları sola yaslı kalınca sütun kaymış görünüyordu (kullanıcı düzeltmesi 2026-10-04). Başlık da sağa yaslanır. */ .nk-bs span:nth-child(4), .nk-bs span:nth-child(5) { text-align:right } .nk-st { font:400 13px/1 Poppins; color:var(--metin); border-bottom:1px solid #f1f4f9 } .nk-st:last-child { border-bottom:0 } .nk-st b { font:600 13px/1 Poppins; color:var(--lacivert); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .nk-st em, .nk-st .ye, .nk-st .kr { text-align:right; white-space:nowrap } .nk-st em { font:600 13.5px/1 Poppins; font-style:normal; color:var(--lacivert) } .nk-st .ye { color:var(--yesil); font-weight:600 } .nk-st .kr { color:var(--kirmizi); font-weight:600 } /* ══════════ AMAZON PANEL ÇİZİMLERİ ══════════ Özellik sayfaları ve Amazon panel turu bu parçalarla çizilir. TASARIM KAYNAĞI: landing'in kendi paleti DEĞİL, Amazon panelinin kendi tasarım dosyası (AMAZON/web/app/globals.css). Değerler oradan birebir alındı; landing paletiyle çizmek üç kez geri döndü (kullanıcı düzeltmeleri 2026-10-04). Panel değişirse önce o dosyaya bakılır. --background #f4f5f7 zemin (kart ondan bir kademe açık) --card #ffffff --foreground #161e3d navy-900 --primary #1e2952 navy-800 — dönem kartı dolgusu --muted-fg #5e6fa0 navy-400 --border #dbdfed navy-100 --accent #eaedf6 --action #e97138 orange-500 — sayfa başına BİR dolgulu eylem --pos #047857 / soft #d1fae5 --neg #be123c / soft #ffe4e6 --warn #b45309 / soft #fef3c7 --info #1d4ed8 / soft #dbeafe --cost #3b4a78 GİDER rengi — komisyon, FBA, COGS, reklam KIRMIZI DEĞİLDİR; kırmızı eşik ihlali demek --radius 10px · gölge 0 1px 2px rgb(22 30 61/.05) yazı: Inter (paneldeki tek aile), tablo hücresi 11px, sütun başlığı 10px ÇİZİM, EKRAN GÖRÜNTÜSÜ DEĞİL: görsel tek sütuna sığmıyor, maskeleme kovalamacası bitmiyor (bir günde beş sızıntı türü) ve panel değişince yirmi görsel birden eskiyor. Ayrıntı: PanelCizim.astro. */ .pz, .k-amazon { --a-bg: #f4f5f7; --a-card: #fff; --a-fg: #161e3d; --a-pri: #1e2952; --a-mut: #5e6fa0; --a-bor: #dbdfed; --a-acc: #eaedf6; --a-act: #e97138; --a-pos: #047857; --a-poss: #d1fae5; --a-neg: #be123c; --a-negs: #ffe4e6; --a-warn: #b45309; --a-warns: #fef3c7; --a-info: #1d4ed8; --a-infos: #dbeafe; --a-cost: #3b4a78; --a-r: 10px; --a-golge: 0 1px 2px rgb(22 30 61 / .05); --a-yazi: "Inter", ui-sans-serif, system-ui, sans-serif; } .pz { padding: 16px; background: var(--a-bg); font-family: var(--a-yazi); color: var(--a-fg); font-feature-settings: "tnum" 0 } .pz > * + * { margin-top: 12px } /* ── dönem kartı ── GÖVDE BEYAZ, YALNIZ BAŞLIK ŞERİDİ LACİVERT. Kartın tamamı lacivert çizilmişti; panelde öyle değil (kullanıcı düzeltmesi 2026-10-04). Panelde beş kart var ve her biri ~280 px; landing sütununda dört kart 200 px'e düşüp alt satırlar taşıyordu — ÜÇ kart basılıyor. */ .pz-kartlar { display: grid; gap: 12px } .pz-kart { border: 1px solid var(--a-bor); border-radius: var(--a-r); background: var(--a-card); color: var(--a-fg); overflow: hidden; min-width: 0; display: flex; flex-direction: column; box-shadow: var(--a-golge) } .pz-kart .sbas { background: var(--a-pri); color: #fff; padding: 10px 13px } .pz-kart .ust { font: 600 13px/1.25 var(--a-yazi) } .pz-kart .tar { font: 400 11px/1.3 var(--a-yazi); color: rgba(255,255,255,.72); margin-top: 1px } .pz-kart .ic { padding: 12px 13px 13px; flex: 1 } .pz-kart .etk { font: 400 11px/1.3 var(--a-yazi); color: var(--a-mut); margin-bottom: 2px } .pz-kart .buyuk { font: 700 22px/1.2 var(--a-yazi); color: var(--a-fg); letter-spacing: -.01em; font-variant-numeric: tabular-nums } .pz-kart .buyuk .delta { font: 400 11px/1 var(--a-yazi); margin-left: 5px } .pz-kart .buyuk .delta.ye { color: var(--a-pos) } .pz-kart .buyuk .delta.kr { color: var(--a-neg) } .pz-kart .kiyas { font: 400 10px/1.4 var(--a-yazi); color: var(--a-mut); margin-top: 4px } .pz-kart .cift { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a-bor) } .pz-kart .cift > div { border: 1px solid var(--a-bor); border-radius: 6px; padding: 7px 9px } .pz-kart .cift small { display: block; font: 400 10px/1.3 var(--a-yazi); color: var(--a-mut) } .pz-kart .cift b { font: 600 16px/1.3 var(--a-yazi); color: var(--a-fg); font-variant-numeric: tabular-nums } .pz-kart .cift b.ye { color: var(--a-pos) } .pz-kart .cift b.kr { color: var(--a-neg) } /* Alt ölçütler panelde İKİ ÇİFT yan yana. */ .pz-kart .mini { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); gap: 4px 8px; margin-top: 12px; font: 400 10px/1.5 var(--a-yazi); color: var(--a-mut) } .pz-kart .mini b { font: 400 10px/1.5 var(--a-yazi); color: var(--a-fg); text-align: right; font-variant-numeric: tabular-nums } .pz-kart .mini b.ye { color: var(--a-pos) } .pz-kart .mini b.kr { color: var(--a-neg) } .pz-kart .detay { color: var(--a-mut); text-align: center; font: 400 12px/1 var(--a-yazi); padding: 10px; border-top: 1px solid var(--a-bor) } /* Tahmin kartı: başlık şeridi açık krem, turuncu yazılı, TAHMİN rozetli. */ .pz-kart.tahmin { border-color: #fbc09c } .pz-kart.tahmin .sbas { background: #fef4ec; color: var(--a-act) } .pz-kart.tahmin .tar { color: #b14219 } .pz-kart .rozet2 { float: right; font: 500 10px/1 var(--a-yazi); text-transform: uppercase; background: #fde0ce; color: #8b3417; border-radius: 4px; padding: 3px 6px } /* ── sayaç kartı (optimizasyon) ── */ .pz-kart.sayac .ust { color: var(--a-mut); font-weight: 400; font-size: 11px } .pz-kart.sayac .buyuk { color: var(--a-fg); font-size: 26px; margin: 3px 0 5px } .pz-kart.sayac .buyuk.kr { color: var(--a-neg) } .pz-kart.sayac p { font: 400 11px/1.45 var(--a-yazi); color: var(--a-mut) } /* ── ölçüt şeridi ── */ .pz-olcut { display: grid; border: 1px solid var(--a-bor); border-radius: var(--a-r); background: var(--a-card); overflow: hidden; box-shadow: var(--a-golge) } .pz-olcut > div { padding: 10px 12px; border-left: 1px solid var(--a-bor); min-width: 0 } .pz-olcut > div:first-child { border-left: 0 } .pz-olcut small { display: block; font: 400 10px/1.3 var(--a-yazi); color: var(--a-mut); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .pz-olcut b { font: 600 17px/1.25 var(--a-yazi); color: var(--a-fg); font-variant-numeric: tabular-nums; white-space: nowrap } .pz-olcut b.ye { color: var(--a-pos) } .pz-olcut b.kr { color: var(--a-neg) } .pz-olcut b.sa { color: var(--a-warn) } /* ── tablo ── */ .pz-tablo { background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 14px 16px 8px; box-shadow: var(--a-golge) } .pz-tablo .bst { display: flex; align-items: baseline; gap: 10px; padding: 0 0 10px } .pz-tablo .bst b { font: 600 14px/1.3 var(--a-yazi); color: var(--a-fg) } .pz-tablo .bst span { font: 400 11px/1.3 var(--a-yazi); color: var(--a-mut) } /* Panelde tablo kartının içinde kırılım sekmeleri ve dışa aktarma düğmeleri var; çizimde de olmalı, yoksa aynı ekran değil. */ .pz-arac { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 10px } .pz-arac .sek { display: flex; gap: 2px; margin-left: auto } .pz-arac .sek span { font: 400 11px/1 var(--a-yazi); color: var(--a-mut); padding: 6px 9px; border-radius: 6px; white-space: nowrap } .pz-arac .sek span.aktif { background: var(--a-card); color: var(--a-fg); border: 1px solid var(--a-bor); font-weight: 500 } .pz-arac .dis { display: flex; gap: 6px } .pz-arac .dis span { font: 400 11px/1 var(--a-yazi); color: var(--a-fg); padding: 6px 9px; border: 1px solid var(--a-bor); border-radius: 6px; background: var(--a-card) } .pz-gov .detay2 { font: 400 11px/1.4 var(--a-yazi); color: var(--a-mut); text-align: right } /* Sıralanabilir sütun işareti; sıralı olan sütunda yön oku ve koyu renk. */ .pz-ok { font-style: normal; margin-left: 3px; opacity: .55; font-size: 9px } .pz-ok.vurgu { opacity: 1; color: var(--a-fg) } /* Süzgeç şeridi: panelde tabloların üstünde dönem/ölçüt segmentleri. */ .pz-suzgec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 8px 10px; box-shadow: var(--a-golge) } .pz-suzgec .seg { display: inline-flex; gap: 2px; background: var(--a-acc); border-radius: 7px; padding: 3px } .pz-suzgec .seg span { font: 400 11px/1 var(--a-yazi); color: var(--a-mut); padding: 6px 10px; border-radius: 5px; white-space: nowrap } .pz-suzgec .seg span.aktif { background: var(--a-card); color: var(--a-fg); font-weight: 500 } .pz-suzgec .sag { margin-left: auto; font: 400 11px/1 var(--a-yazi); color: var(--a-fg); border: 1px solid var(--a-bor); border-radius: 6px; padding: 6px 10px } /* Sıra numarası: panelde sıralama tablolarının ilk sütunu. */ .pz-no { font: 400 11px/1.4 var(--a-yazi); color: var(--a-mut); font-variant-numeric: tabular-nums } /* İki tablo yan yana — panelde "en çok satanlar" ve "en kârlı" öyle. */ .pz-ikili { display: grid; gap: 12px } /* Nokta işareti: panelde durum listeleri rozetle değil renkli noktayla. */ .pz-nokta { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1.4 var(--a-yazi); color: var(--a-fg) } .pz-nokta i { width: 7px; height: 7px; border-radius: 50%; flex: none } .pz-nokta i.ye { background: var(--a-pos) } .pz-nokta i.kr { background: var(--a-neg) } .pz-nokta i.sa { background: var(--a-warn) } .pz-nokta i.ma { background: var(--a-info) } /* Durum çipleri */ .pz-durum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 10px 12px; box-shadow: var(--a-golge) } .pz-durum .bsl { font: 500 11px/1 var(--a-yazi); color: var(--a-mut); margin-right: 2px } .pz-durum .cip { font: 500 11px/1 var(--a-yazi); border-radius: 5px; padding: 6px 9px; background: var(--a-acc); color: var(--a-fg) } .pz-durum .cip.ye { background: var(--a-poss); color: var(--a-pos) } .pz-durum .cip.kr { background: var(--a-negs); color: var(--a-neg) } .pz-durum .cip.sa { background: var(--a-warns); color: var(--a-warn) } .pz-durum .cip.ma { background: var(--a-infos); color: var(--a-info) } /* Alan grafiği */ .pz-grafik { background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 14px 16px 12px; box-shadow: var(--a-golge) } .pz-grafik .bst { display: flex; align-items: baseline; gap: 10px; padding: 0 0 10px } .pz-grafik .bst b { font: 600 14px/1.3 var(--a-yazi); color: var(--a-fg) } .pz-grafik .bst span { font: 400 11px/1.3 var(--a-yazi); color: var(--a-mut) } .pz-grafik svg { display: block; width: 100%; height: 120px } .pz-grafik .eks { display: flex; justify-content: space-between; padding-top: 7px; font: 400 10px/1 var(--a-yazi); color: var(--a-mut) } /* ════════════════════════════════════════════════════════════════ ÖN MUHASEBE TEMASI — token'lar muhasebe reposunun KENDİ `src/app/globals.css` dosyasından birebir alındı (04.10.2026 tasarımı: landing temasına geçiş, tek aksan yeşil). Parça türleri Amazon'la ortak; değişen yalnız tasarım dili. ════════════════════════════════════════════════════════════════ */ .pz.pz-mh { --a-bg: #f6f8fc; --a-card: #fff; --a-fg: #1b2740; --a-pri: #041e47; --a-mut: #626f85; --a-bor: #e4e9f2; --a-acc: #eef1f7; --a-act: #0f7a47; --a-pos: #0a6e3f; --a-poss: #e8f5ee; --a-neg: #c02b2b; --a-negs: #fdeded; --a-warn: #8a5a12; --a-warns: #fdf6e7; --a-info: #2563eb; --a-infos: #e7eefc; --a-cost: #3d4b60; --a-r: 12px; --a-golge: 0 1px 2px rgb(5 44 101 / .06), 0 8px 20px rgb(5 44 101 / .05); --a-yazi: "Poppins", "Segoe UI", system-ui, sans-serif; } /* Ölçüt şeridi muhasebede AYRI KARTLAR DEĞİL, tek kartın içinde dikey çizgilerle bölünmüş hücreler. */ .pz-mh .pz-olcut { gap: 0; background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); box-shadow: var(--a-golge); overflow: hidden } .pz-mh .pz-olcut > div { background: none; border: 0; border-radius: 0; box-shadow: none; border-left: 1px solid var(--a-bor); padding: 13px 16px } .pz-mh .pz-olcut > div:first-child { border-left: 0 } .pz-mh .pz-olcut em { display: block; padding-top: 4px; font: 400 10.5px/1.45 var(--a-yazi); font-style: normal; color: var(--a-mut) } /* Durum pill'i: muhasebede yuvarlak uçlu ve önünde nokta var */ .pz-mh .pz-r { border-radius: 10px; gap: 6px; padding: 0 9px; height: 21px } .pz-mh .pz-r::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none } /* Sekme: alt çizgi değil, beyaz kutu içinde soft yeşil hap */ .pz-mh .pz-sekme { gap: 2px; padding: 3px; border-radius: 10px } .pz-mh .pz-sekme span { border-bottom: 0; border-radius: 8px; padding: 7px 13px } .pz-mh .pz-sekme span.aktif { background: var(--a-poss); color: var(--a-pos) } /* Birincil düğme ve satır içi eylem yeşil */ .pz-mh .pz-eylem { background: var(--a-act); color: #fff } /* Ürün hücresinde küçük resim yok; kod satırı tek aralıklı yazıyla */ .pz-mh .pz-u i { display: none } .pz-mh .pz-u span { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--a-mut) } .pz-mh .pz-u b { color: var(--a-fg) } /* Kâr–zarar dökümü: muhasebe panelinde lacivert başlık şeridi YOK — kartlar beyaz, başlık koyu metin. */ .pz-mh .pz-dokum .bsl { background: var(--a-card); color: var(--a-fg); border-bottom: 1px solid var(--a-bor) } .pz-mh .pz-dokum .bsl b { color: var(--a-fg) } .pz-mh .pz-dokum .bsl span { color: var(--a-mut) } /* Muhasebede birincil düğme her yerde yeşil — uyarı şeridindeki de. */ .pz-mh .pz-uyari i { background: var(--a-act) } /* Sayfa başlığı */ .pz-sbas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap } .pz-sbas b { display: block; font: 600 21px/1.25 var(--a-yazi); color: var(--a-fg) } .pz-sbas span { display: block; padding-top: 3px; font: 400 12px/1.5 var(--a-yazi); color: var(--a-mut) } .pz-sbas .dug { display: flex; gap: 8px; flex: none } .pz-sbas .dug i { font: 500 11.5px/1 var(--a-yazi); font-style: normal; border: 1px solid var(--a-bor); background: var(--a-card); color: var(--a-fg); border-radius: 8px; padding: 9px 12px; white-space: nowrap } .pz-sbas .dug i.ana { background: var(--a-act); border-color: var(--a-act); color: #fff } /* İkili çubuk grafik */ .pz-cubuk { background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 14px 16px 12px; box-shadow: var(--a-golge) } .pz-cubuk .bst { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px } .pz-cubuk .bst b { font: 600 14px/1.3 var(--a-yazi); color: var(--a-fg) } .pz-cubuk .gst { display: flex; gap: 12px } .pz-cubuk .gst em { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--a-yazi); font-style: normal; color: var(--a-mut) } .pz-cubuk .gst i { width: 9px; height: 9px; border-radius: 2px } .pz-cubuk .alan { display: flex; align-items: flex-end; gap: 10px; height: 148px } .pz-cubuk .grup { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 7px } .pz-cubuk .ikiz { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; border-bottom: 1px solid var(--a-bor) } .pz-cubuk .ikiz u { width: 16px; border-radius: 3px 3px 0 0; text-decoration: none } .pz-cubuk .grup > span { text-align: center; font: 400 10.5px/1 var(--a-yazi); color: var(--a-mut) } .pz-cubuk .ye, .pz-cubuk u.ye { background: var(--a-act) } .pz-cubuk .gri, .pz-cubuk u.gri { background: #b8c2d6 } /* Bulgu kartları (optimizasyon ekranı) */ .pz-bulgular { display: flex; flex-direction: column; gap: 8px } .pz-bulgu { background: var(--a-card); border: 1px solid var(--a-bor); border-left: 3px solid var(--a-mut); border-radius: var(--a-r); padding: 10px 13px; box-shadow: var(--a-golge) } .pz-bulgu.kr { border-left-color: var(--a-neg) } .pz-bulgu.sa { border-left-color: var(--a-warn) } .pz-bulgu.ye { border-left-color: var(--a-pos) } .pz-bulgu .bsl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-bottom: 5px } .pz-bulgu .bsl .tur { font: 600 9.5px/1 var(--a-yazi); letter-spacing: .06em; text-transform: uppercase; color: var(--a-mut) } .pz-bulgu .bsl .onem { font: 600 9.5px/1 var(--a-yazi); letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 4px 6px; background: var(--a-acc); color: var(--a-fg) } .pz-bulgu .bsl .onem.kr { background: var(--a-negs); color: var(--a-neg) } .pz-bulgu .bsl .onem.sa { background: var(--a-warns); color: var(--a-warn) } .pz-bulgu .bsl b { font: 600 12px/1.3 var(--a-yazi); color: var(--a-fg) } .pz-bulgu .bsl .kmp { font: 400 11px/1.3 var(--a-yazi); color: var(--a-mut) } .pz-bulgu p { margin: 0; font: 400 11.5px/1.5 var(--a-yazi); color: var(--a-mut) } .pz-bulgu p.oner { color: var(--a-neg); padding-top: 2px } .pz-bulgu .kanit { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 7px } .pz-bulgu .kanit span { font: 500 10px/1 var(--a-yazi); border-radius: 4px; padding: 5px 7px; background: var(--a-acc); color: var(--a-fg) } /* Uyarı şeridi (öneri ve strateji ekranlarının üstü) */ .pz-uyari { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--a-warns); border: 1px solid #f5d98a; border-radius: var(--a-r); padding: 10px 13px } .pz-uyari b { font: 600 12px/1.3 var(--a-yazi); color: var(--a-warn) } .pz-uyari span { flex: 1; font: 400 11.5px/1.45 var(--a-yazi); color: var(--a-warn); opacity: .88 } .pz-uyari i { font: 500 11px/1 var(--a-yazi); font-style: normal; color: #fff; background: var(--a-pri); border-radius: 6px; padding: 7px 11px; white-space: nowrap } /* Çipli seçim hücresi (strateji: Kâr · Lansman · Büyüme …) */ .pz-sec { display: flex; gap: 4px; flex-wrap: wrap } .pz-sec i { font: 500 10.5px/1 var(--a-yazi); font-style: normal; border-radius: 5px; padding: 5px 7px; background: var(--a-acc); color: var(--a-mut); white-space: nowrap } .pz-sec i.aktif { background: var(--a-act); color: var(--a-fg) } /* Eylem düğmesi (stok: "Sipariş ver") */ .pz-eylem { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: var(--a-act); color: var(--a-fg); font: 500 11px/1 var(--a-yazi); white-space: nowrap } @media (max-width: 760px) { .pz-ikili { grid-template-columns: 1fr } } .pz-satir { display: grid; grid-template-columns: var(--k); gap: 10px; align-items: center; padding: 9px 0 } .pz-bas { font: 400 11px/1.3 var(--a-yazi); color: var(--a-mut); border-bottom: 1px solid var(--a-bor); padding-top: 0; padding-bottom: 8px } .pz-gov { font: 400 12px/1.4 var(--a-yazi); color: var(--a-fg); border-bottom: 1px solid var(--a-bor) } .pz-gov:last-of-type { border-bottom: 0 } .pz-top { border-top: 1px solid var(--a-bor); font: 500 12px/1.4 var(--a-yazi); color: var(--a-fg) } .pz-satir .s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums } /* GİDER KIRMIZI DEĞİL: komisyon, FBA, COGS ve reklam gider kalemidir; kırmızı eşik ihlali demek ve her yerde olunca ihlal fark edilmiyor. */ .pz-gov .s { color: var(--a-cost) } .pz-gov .s.v { font-weight: 600; color: var(--a-fg) } .pz-gov .s.ye { color: var(--a-pos); font-weight: 500 } .pz-gov .s.kr { color: var(--a-neg); font-weight: 500 } .pz-gov .s.so { color: var(--a-mut) } /* ── ürün künyesi ── */ .pz-u { display: flex; align-items: center; gap: 10px; min-width: 0 } .pz-u > i { width: 30px; height: 30px; flex: none; border-radius: 4px; background: var(--a-acc); border: 1px solid var(--a-bor) } .pz-u > div { min-width: 0 } /* Ürün başlığı panelde MAVİ bağlantıdır (ürün sayfasına gider), koyu metin değil. */ .pz-u b { display: block; font: 400 12px/1.35 var(--a-yazi); color: var(--a-info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pz-u span { display: block; font: 400 10px/1.4 var(--a-yazi); color: var(--a-mut); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } /* ── rozet ve etiket ── */ .pz-r { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 4px; font: 500 10px/1 var(--a-yazi); white-space: nowrap } .pz-r.ye { color: var(--a-pos); background: var(--a-poss) } .pz-r.kr { color: var(--a-neg); background: var(--a-negs) } .pz-r.sa { color: var(--a-warn); background: var(--a-warns) } .pz-r.ma { color: var(--a-info); background: var(--a-infos) } .pz-e { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 4px; background: var(--a-acc); font: 400 10px/1 var(--a-yazi); color: var(--a-fg); white-space: nowrap } /* ── onay / ret ── */ .pz-karar { display: flex; gap: 6px; justify-content: flex-end } .pz-dg { height: 25px; padding: 0 10px; border-radius: 6px; border: 1px solid transparent; font: 500 11px/1 var(--a-yazi); display: inline-flex; align-items: center; white-space: nowrap } /* Sayfa başına BİR dolgulu eylem: turuncu, yazısı lacivert (beyaz turuncu üstünde 3,1:1 kalıyor, lacivert 5,4:1). */ .pz-dg.ana { background: var(--a-act); color: var(--a-fg) } .pz-dg.cer { background: var(--a-card); border-color: var(--a-bor); color: var(--a-fg) } /* ── pay çubuğu ── */ .pz-paykart { background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r); padding: 14px 16px; box-shadow: var(--a-golge) } .pz-pay { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.1fr) 104px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--a-bor) } .pz-pay:last-child { border-bottom: 0 } .pz-pay > span { font: 400 12px/1.4 var(--a-yazi); color: var(--a-fg) } .pz-pay .cb { height: 6px; border-radius: 3px; background: var(--a-acc); overflow: hidden } .pz-pay .cb i { display: block; height: 100% } .pz-pay > b { text-align: right; font: 500 12px/1.4 var(--a-yazi); color: var(--a-fg); font-variant-numeric: tabular-nums } /* ── kâr dökümü ── */ .pz-dokum { border: 1px solid var(--a-bor); border-radius: var(--a-r); background: var(--a-card); overflow: hidden; box-shadow: var(--a-golge) } .pz-dokum .bsl { background: var(--a-pri); color: #fff; padding: 13px 16px } .pz-dokum .bsl b { font: 600 14px/1.3 var(--a-yazi) } .pz-dokum .bsl span { display: block; font: 400 11px/1.4 var(--a-yazi); color: rgba(255,255,255,.72); margin-top: 2px } .pz-dk { display: grid; grid-template-columns: minmax(0,1fr) 68px 100px; gap: 10px; align-items: center; padding: 8px 16px; font: 400 12px/1.4 var(--a-yazi); color: var(--a-fg); border-bottom: 1px solid var(--a-bor) } .pz-dk em { font-style: normal; text-align: right; font: 400 10px/1.4 var(--a-yazi); color: var(--a-mut); font-variant-numeric: tabular-nums } .pz-dk b { text-align: right; font: 400 12px/1.4 var(--a-yazi); color: var(--a-cost); font-variant-numeric: tabular-nums } .pz-dk.kalin { background: var(--a-acc) } .pz-dk.kalin, .pz-dk.kalin b { font-weight: 600; color: var(--a-fg) } .pz-dk b.ye { color: var(--a-pos) } .pz-dk b.kr { color: var(--a-neg) } .pz-dort { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 13px 16px } .pz-dort > div { background: var(--a-acc); border-radius: 6px; padding: 8px 10px } .pz-dort small { display: block; font: 400 10px/1.3 var(--a-yazi); color: var(--a-mut) } .pz-dort b { font: 600 14px/1.3 var(--a-yazi); color: var(--a-fg); font-variant-numeric: tabular-nums } .pz-dort b.kr { color: var(--a-neg) } .pz-not { font: 400 11px/1.5 var(--a-yazi); color: var(--a-mut); padding: 10px 16px; border-top: 1px solid var(--a-bor) } /* ── sekme şeridi ── */ .pz-sekme { display: flex; gap: 4px; background: var(--a-card); border: 1px solid var(--a-bor); border-radius: var(--a-r) var(--a-r) 0 0; padding: 6px 8px 0; overflow: hidden } .pz-sekme + .pz-tablo { border-radius: 0 0 var(--a-r) var(--a-r); border-top: 0; margin-top: 0 } .pz-sekme span { padding: 7px 11px; font: 400 12px/1 var(--a-yazi); color: var(--a-mut); border-radius: 6px 6px 0 0; white-space: nowrap } .pz-sekme span.aktif { color: var(--a-fg); background: var(--a-acc); font-weight: 500 } /* Dar kurallar EKRAN değil KAPSAYICI genişliğine bağlı. Hata (2026-10-04, iki dilde birden): özellik sayfasında gövde 760px, ekran 1280px. Ekran geniş olduğu için `dar-gizle` hiç devreye girmiyor, sekiz sütunlu ASIN tablosu 760px'e sıkışıyor ve ürün adı "P…" diye kırpılıyordu — tablonun asıl taşıdığı bilgi okunmaz oluyordu. Kapsayıcı sorgusu hem dar ekranı hem dar sütunu yakalar. */ .pz { container-type: inline-size } @container (max-width: 760px) { .pz-satir { grid-template-columns: var(--kd) } .pz-satir .dar-gizle { display: none } .pz-olcut { grid-template-columns: repeat(3,1fr) } .pz-kartlar { grid-template-columns: repeat(2,1fr) } .pz-pay { grid-template-columns: minmax(0,1fr) 70px minmax(0,82px) } .pz-dort { grid-template-columns: repeat(2,1fr) } } /* Kapsayıcı sorgusunu desteklemeyen tarayıcı için eski davranış korunur. */ @media (max-width: 760px) { .pz-satir .dar-gizle { display: none } .pz-olcut { grid-template-columns: repeat(3,1fr) } .pz-kartlar { grid-template-columns: repeat(2,1fr) } .pz-pay { grid-template-columns: minmax(0,1fr) 70px minmax(0,82px) } .pz-dort { grid-template-columns: repeat(2,1fr) } } /* ══════════ ANA SAYFA HERO: SPONSORED ADS (çizim) ══════════ Amazon sekmesinin görseli. Panelin KENDİ tasarımı korunuyor (kullanıcı kararı 2026-10-04: "Amazon'un mevcut tasarımı daha güzel") — ölçüt şeridi tek kutu içinde ayıraçlarla, tablo yoğun. Ürün aksanı turuncu; landing kuralı kârlılık lacivert, ön muhasebe yeşil, Amazon turuncu. */ .sp { padding:16px 18px 18px } .sp-bas { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:0 2px 13px } .sp-bas b { font:600 17px/1.2 Poppins; color:var(--lacivert) } .sp-bas > div > span { display:block; font:400 12px/1.4 Poppins; color:var(--soluk); margin-top:2px } .sp-bas i { font:600 12.5px/1.3 Poppins; font-style:normal; color:var(--turuncu-koyu); white-space:nowrap } /* ALTI ÖLÇÜT, ALTI KUTU DEĞİL: her birine kart çizmek hero'yu parçalıyor. Tek kutu, aralarında ince ayıraç — panelin kendi kalıbı. */ .sp-serit { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--cizgi); border-radius:12px; background:#fff; overflow:hidden } .sp-serit > div { padding:11px 13px; border-left:1px solid var(--cizgi); min-width:0 } .sp-serit > div:first-child { border-left:0 } .sp-serit small { display:block; font:500 11px/1.2 Poppins; color:var(--soluk); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .sp-serit b { font:600 17px/1.2 Poppins; color:var(--lacivert); letter-spacing:-.015em; font-variant-numeric:tabular-nums; white-space:nowrap } .sp-serit b.ye { color:var(--yesil) } .sp-liste { margin-top:13px } .sp-bs, .sp-st, .sp-top { display:grid; grid-template-columns:minmax(0,2.9fr) repeat(4,minmax(0,1fr)); gap:10px; align-items:center; padding:9px 4px } .sp-bs { font:600 11.5px/1.3 Poppins; color:var(--soluk); border-bottom:1px solid var(--cizgi); padding-top:0 } .sp-bs span + span, .sp-st > span, .sp-st em, .sp-top > span, .sp-top em { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums } .sp-st { font:400 13px/1.3 Poppins; color:var(--metin); border-bottom:1px solid #f1f4f9 } .sp-st em { font:600 13.5px/1.3 Poppins; font-style:normal; color:var(--lacivert) } /* Ürün künyesi: görsel yeri maskeli (gerçek panelde ürün fotoğrafı var, tanıtımda maskeleniyor — CLAUDE.md). */ .sp-u { display:flex; align-items:center; gap:9px; min-width:0 } .sp-u > i { width:26px; height:26px; flex:none; border-radius:6px; background:var(--zemin) center/14px no-repeat url("data:image/svg+xml;utf8,"); border:1px solid var(--cizgi) } .sp-u > div { min-width:0 } .sp-u b { display:block; font:600 13px/1.3 Poppins; color:var(--lacivert); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sp-u span { font:400 11px/1.3 ui-monospace, Menlo, Consolas, monospace; color:var(--soluk) } /* Alt toplam: beş satır şeridin ne kadarını açıklıyor. Şerit 37 ürünün tamamı, tablo en çok harcayan beşi — ikisi karıştırılmasın diye yazılı. */ .sp-top { border-top:1px solid var(--cizgi); background:var(--zemin); border-radius:0 0 10px 10px; font:600 12.5px/1.3 Poppins; color:var(--lacivert); margin-top:2px } /* Toplam satırının ETİKETİ sola kalır; genel sağa yaslama onu da kaydırıyordu. */ .sp-top > span:first-child { text-align:left } .sp-top em { font-style:normal } @media (max-width:700px) { .sp-serit { grid-template-columns:repeat(3,1fr) } .sp-serit > div:nth-child(4) { border-left:0 } .sp-bs, .sp-st, .sp-top { grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) } .sp-bs span:nth-child(4), .sp-st > span:nth-child(4), .sp-top > span:nth-child(4) { display:none } } /* Dar ekranda dört kart yan yana sığmıyor; punto küçültmek yerine ikişerli iki satır — hero'nun derdi okunurluk. */ @media (max-width:620px) { .nk-kartlar { grid-template-columns:repeat(2,1fr) } .nk-bs, .nk-st { grid-template-columns:48px minmax(0,1.4fr) 1fr 1fr } .nk-bs span:nth-child(3), .nk-st span:nth-child(3) { display:none } } /* ══════════ ANA SAYFA: ürün şeridi ══════════ */ .hero { background:linear-gradient(180deg,#fff 0%,var(--zemin) 100%); padding:60px 0 66px } .ikili { display:grid; grid-template-columns:minmax(0,48%) minmax(0,52%); gap:44px; align-items:center } .ikili > * { min-width:0 } .urunserit { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:46px } .ukart { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--cizgi); border-radius:14px; padding:16px 18px; box-shadow:var(--golge-1); transition:transform .18s ease, box-shadow .18s ease } .ukart:hover { transform:translateY(-2px); box-shadow:var(--golge-2) } .ukart .ik { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font:600 16px/1 Poppins; flex:none } .ukart .mt { display:flex; flex-direction:column; gap:3px; flex:1 } .ukart .mt b { font:600 15.5px/1.2 Poppins } .ukart .mt small { font:400 12.5px/1.3 Poppins; color:var(--soluk) } .ukart .ok { color:var(--lacivert-600); font:600 17px/1 Poppins } /* ══════════ ÜRÜN SAYFASI ══════════ */ .urunhero { background:linear-gradient(180deg,var(--zemin) 0%,#fff 100%); padding:56px 0 64px } /* ══════════ ALT BİLGİ ══════════ */ footer { background:var(--lacivert-900); color:#9fb3d4; padding:48px 0 30px; margin-top:0; font:400 13.5px/1.7 Poppins } footer .kap { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px } footer h4 { font:600 14px/1 Poppins; color:#fff; margin-bottom:14px } footer a { display:block; padding:5px 0 } footer a:hover { color:#fff } footer .alt2 { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); margin-top:24px; padding-top:18px; font-size:12.5px; display:flex; justify-content:space-between } /* BAĞIMSIZLIK FERAGATI — her sayfada basılır, gerekçesi `site.js` → SIRKET. Izgaranın tamamını kaplar (`1/-1`): dört sütunlu alt bilgide bir sütuna sıkışsa satır satır kırılır ve okunmaz. Telefonda 11 px tabanının altına inmiyor — mikro etiket ailesinin kuralı (dosyanın sonundaki blok). */ footer .alt-feragat { grid-column:1/-1; margin-top:12px; max-width:62em; font-size:11.5px; line-height:1.6; color:#7e93b5 } /* ══════════ CEVAP-ÖNCE BÖLÜM (GEO) ══════════ Yapay zekâ motorları sayfadan kısa, kendi başına anlamlı cevap cümleleri alıntılıyor. Bu blok tam olarak onun için: soru başlık, hemen altında tek paragraflık net cevap, sonra ayrıntı. İnsana da faydalı. */ .cevap { background:var(--zemin); padding:64px 0; border-top:1px solid var(--cizgi); scroll-margin-top:92px } /* yapışık menü başlığı kapatmasın */ .cevap .kap { max-width:880px } .cevap > .kap > h2 { margin-bottom:8px } .cevap .giris { font:400 16px/1.7 Poppins; color:var(--metin); margin-bottom:34px } .ozet { background:#fff; border:1px solid var(--cizgi); border-left:3px solid var(--turuncu); border-radius:var(--r-kart); padding:24px 28px; box-shadow:var(--golge-1); margin-bottom:34px } .ozet h3 { font:600 17px/1.4 Poppins; margin-bottom:10px } .ozet p { font:400 16px/1.72 Poppins; color:var(--metin) } .ozet .formul { margin-top:16px; padding-top:16px; border-top:1px solid var(--cizgi); font:500 14px/1.75 Poppins; color:var(--lacivert) } .ozet .formul code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:13px; background:var(--zemin); border-radius:6px; padding:2px 7px } details.sss { background:#fff; border:1px solid var(--cizgi); border-radius:12px; margin-bottom:10px; overflow:hidden } details.sss summary { list-style:none; cursor:pointer; padding:18px 22px; font:600 15.5px/1.45 Poppins; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .16s ease } details.sss summary::-webkit-details-marker { display:none } details.sss summary:hover { background:#fafcff } details.sss summary::after { content:"+"; font:400 20px/1 Poppins; color:var(--urun); flex:none; transition:transform .2s cubic-bezier(.23,1,.32,1) } details.sss[open] summary::after { transform:rotate(45deg) } details.sss .ic2 { padding:0 22px 20px; font:400 15px/1.72 Poppins; color:var(--metin) } details.sss .ic2 p + p { margin-top:12px } /* güven/yazar imzası — E-E-A-T sinyali, hem insana hem motora */ .imza { display:flex; align-items:center; gap:14px; margin-top:34px; padding-top:24px; border-top:1px solid var(--cizgi); font:400 13.5px/1.6 Poppins; color:var(--soluk) } .imza .av { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--urun),var(--urun-koyu)); color:#fff; font:600 15px/1 Poppins } .imza b { color:var(--lacivert); font-weight:600 } /* ══════════ GERÇEK PANEL GÖRSELİ ══════════ Tarayıcı çerçevesinin içindeki içerik artık CSS çizimi değil, demo hesabından alınan gerçek ekran görüntüsü (2x, kırpılmış). */ .pencere img { display:block; width:100%; height:auto } /* Panel görselleri yatay olduğu için ürün sayfalarında görsel sütununa biraz daha yer ver — tablo landing ölçeğinde okunur kalsın. */ .urunhero .ikili { grid-template-columns:minmax(0,44%) minmax(0,56%) } /* Panel görseli gerçek arayüz olduğu için içinde çok bilgi var; sütun genişliğine sığdırınca okunmuyor. Sağ kenardan taşırarak büyütüyoruz — kırpılan kısım tarayıcı çerçevesinin sağ kenarı, bilgi kaybı yok. */ body { overflow-x:hidden } .hero .ikili, .urunhero .ikili { grid-template-columns:minmax(0,42%) minmax(0,58%); gap:36px } /* Taşma ekran genişliğine bağlı: sağ kenardan dışarı sarkıp tablonun son kolonunu (MARJ) kesmesin. */ .hero .pencere, .urunhero .pencere { width:126%; max-width:calc(100vw - 680px) } @media (max-width:1100px) { .hero .ikili, .urunhero .ikili { grid-template-columns:1fr; gap:40px } /* `max-width` DA SIFIRLANMALI — yalnız `width` yetmiyordu (2026-10-27). Üstteki kural taşmayı ekran genişliğine bağlamak için `max-width:calc(100vw - 680px)` kuruyor; o hesap 680 px'in altında NEGATİFE düşüyor ve negatif max-width 0'a kırpılıyor. Sonuç: telefonda panel görseli 2 px genişliğinde bir çizgiye iniyor, yerinde de ekran boyu boş alan kalıyordu (/ ve /en'de ölçüldü: 390 px'te genişlik 2 px, /en'de 459 px yüksekliğinde bomboş bir blok). Tek sütuna inen düzende taşmaya zaten gerek yok: görsel sütunun tamamını kullanıyor. */ .hero .pencere, .urunhero .pencere { width:100%; max-width:none } } /* ══════════ ANA SAYFA: ÜRÜN SEÇİCİ ══════════ Hap şeklinde birleşik sekme grubu yerine ayrı kartlar — birleşik grup "aynı yazılımın farklı görünümleri" gibi okunuyordu, üç ayrı ürünü tek ürünün özellikleri sanma riski vardı. */ .secici-ust { display:block; font:600 12px/1 Poppins; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk); margin:28px 0 12px } .secici { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px } .secici button { display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--cizgi); border-radius:12px; padding:10px; font:inherit; transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease } .secici button:hover { transform:translateY(-1px); box-shadow:var(--golge-1) } .secici button:active { transform:scale(.985) } .secici button .ik { width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center; color:#fff; font:600 13px/1 Poppins; opacity:.55; transition:opacity .18s ease } .secici button .mt { display:flex; flex-direction:column; gap:2px; min-width:0 } .secici button .mt b { font:600 12.5px/1.2 Poppins; color:var(--lacivert); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .secici button .mt small { font:400 10.5px/1.3 Poppins; color:var(--soluk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .secici button[aria-selected="true"] { border-color:var(--urun); box-shadow:var(--golge-1) } .secici button[aria-selected="true"] .ik { opacity:1 } .secici button[aria-selected="true"] .mt b { color:var(--urun) } /* seçili olmayan açıklama/görsel gizlenir; yükseklik zıplamasın diye alt sınır */ .hpanel[hidden], .gorsel-kat > div[hidden] { display:none } .hpanel .alt { margin-top:0; min-height:5.2em } @media (max-width:640px) { .secici { grid-template-columns:1fr } .hpanel .alt { min-height:0 } } /* Menüde öne çıkan bağlantı — ücretsiz hesaplayıcı iyi trafik getiriyor, diğer menü maddeleri arasında kaybolmasın. */ .menu nav a.one-cikan { background:var(--zemin); border:1px solid var(--cizgi); border-radius:999px; padding:9px 16px; opacity:1; align-self:center; font-weight:600; /* TEK SATIR (2026-10-28). Hap biçimli bir bağlantı sarınca hap olmaktan çıkıyor: ad "Pazaryeri Komisyon Hesaplama" olunca 1010–1180 px arasında üç satıra bölünüp menü şeridini 74'ten 100 px'e çıkarıyordu. */ white-space:nowrap } /* İşlem düğmeleri de aynı satırda: "Giriş Yap" ve "Ücretsiz Dene" dar masaüstünde kendiliğinden ikiye bölünüyordu — hap uzamadan ÖNCE de böyleydi, aynı satırın parçası olduğu için burada kapatıldı. */ .menu .islem .dugme { white-space:nowrap } .menu nav a.one-cikan:hover { background:#e7edf7; border-color:#cfd9e8 } /* hesaplayıcı sayfası: eski Flask şablonundan taşınan bölüm */ .hesap-sayfa { background:var(--zemin); padding:44px 0 64px } .hesap-sayfa .container { max-width:1240px; margin:0 auto; padding:0 32px } /* ══════════ ŞEMSİYE ANA SAYFA BÖLÜMLERİ ══════════ */ /* ══════════ PLATFORM ŞERİDİ (akan) ══════════ Üç satır sırayla sola/sağa/sola akar. İçerik iki kez basılır; animasyon tam yarısında (-50%) başa döner, görüntü aynı olduğu için atlama görünmez. */ .platformlar { background:#fff; padding:44px 0; border-bottom:1px solid var(--cizgi) } .etiket2 { display:block; text-align:center; font:600 12px/1 Poppins; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk); margin-bottom:22px } .serit-kutu { position:relative; overflow:hidden; padding:2px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) } .pserit { overflow:hidden; margin-bottom:10px } .pserit:last-child { margin-bottom:0 } .pakis { display:flex; gap:10px; width:max-content; animation:kay var(--sure) linear infinite } .pserit.sag .pakis { animation-direction:reverse } .serit-kutu:hover .pakis { animation-play-state:paused } /* 4 kopyanın yarısı = 2 kopya; oraya varınca görüntü başlangıçla aynı olur. */ @keyframes kay { from { transform:translateX(0) } to { transform:translateX(-50%) } } .plogo { display:inline-flex; align-items:center; gap:9px; flex:none; border:1px solid var(--cizgi); border-radius:999px; padding:8px 16px 8px 9px; font:500 13.5px/1 Poppins; color:var(--metin); background:#fff; white-space:nowrap } .plogo img { width:24px; height:24px; object-fit:contain; border-radius:6px; flex:none } .notm { text-align:center; margin:22px auto 0; max-width:58em; font:400 13px/1.7 Poppins; color:var(--soluk) } .notm a { color:var(--lacivert-600); font-weight:600 } /* Hareketi azaltmayı seçen kullanıcıda şerit durur, sabit liste gibi okunur. */ @media (prefers-reduced-motion:reduce) { .pakis { animation:none; flex-wrap:wrap; width:auto; justify-content:center } .serit-kutu { -webkit-mask-image:none; mask-image:none } } /* ortak bölüm başlığı */ .urunler-bolum, .kimin { padding:66px 0 } .urunler-bolum { background:var(--zemin) } .kimin { background:#fff } .urunler-bolum h2, .kimin h2 { text-align:center } .bolum-alt { text-align:center; margin:12px auto 40px; max-width:44em; font:400 16.5px/1.7 Poppins; color:var(--metin) } /* ürün blokları */ .ublok { display:grid; grid-template-columns:repeat(3,1fr); gap:20px } .ukutu { background:#fff; border:1px solid var(--cizgi); border-top:3px solid var(--urun); border-radius:var(--r-kart); padding:24px; display:flex; flex-direction:column; box-shadow:var(--golge-1) } .ukutu .ubas { display:flex; gap:13px; align-items:flex-start; margin-bottom:18px } .ukutu .ik { width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff; font:600 17px/1 Poppins } .ukutu .ust { display:block; font:600 12px/1 Poppins; letter-spacing:.1em; text-transform:uppercase; color:var(--urun); margin-bottom:7px } .ukutu h3 { font:600 18px/1.35 Poppins; letter-spacing:-.01em; color:var(--lacivert) } .ukutu ul { list-style:none; margin:0 0 22px; flex:1 } .ukutu li { position:relative; padding:0 0 11px 20px; font:400 14px/1.6 Poppins; color:var(--metin) } .ukutu li::before { content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--urun) } .ukutu .dugme { align-self:flex-start; color:var(--urun); border-color:var(--urun) } /* kimin için */ .kgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px } .kkart { background:var(--zemin); border-radius:var(--r-kart); padding:26px } .kkart h3 { font:600 17.5px/1.35 Poppins; margin-bottom:12px } .kkart p { font:400 14.5px/1.7 Poppins; color:var(--metin) } .kbag { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px } .kbag a { border:1px solid var(--urun); color:var(--urun); border-radius:999px; padding:6px 13px; font:600 12.5px/1 Poppins; background:#fff } /* çağrı bandı */ .cagri { background:var(--lacivert-900); color:#fff; padding:54px 0 } .cagri .kap { display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center } .cagri h2 { color:#fff } .cagri p { font:400 15.5px/1.7 Poppins; color:#a8bede; margin-top:14px; max-width:34em } .cdugmeler { display:flex; flex-direction:column; gap:11px; align-items:stretch } .cdugmeler .dugme { justify-content:center } .cdugmeler .cerceve { background:transparent; color:#fff; border-color:rgba(255,255,255,.3) } .cdugmeler .cerceve:hover { background:rgba(255,255,255,.08) } @media (max-width:900px) { .ublok, .kgrid, .cagri .kap { grid-template-columns:1fr } } /* ══════════ ÜRÜN SEÇİCİLİ SSS ══════════ */ .sss-bolum .secici { max-width:660px; margin:0 auto 30px } .sss-kume[hidden] { display:none } .sss-daha { margin-top:18px; font:600 14.5px/1 Poppins } .sss-daha a { color:var(--urun) } /* destek kutusu — sorusu cevapsız kalanı boşluğa bırakma */ .destek { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; margin-top:34px; padding:24px 26px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); box-shadow:var(--golge-1) } .destek-ik { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--zemin); color:var(--urun) } .destek-ik svg { width:23px; height:23px } .destek h3 { font:600 16.5px/1.35 Poppins; margin-bottom:6px } .destek p { font:400 14px/1.65 Poppins; color:var(--metin) } .destek .dugme { white-space:nowrap } @media (max-width:820px) { .destek { grid-template-columns:1fr; text-align:left } .destek .dugme { justify-content:center } } /* ══════════ FİYATLAR ══════════ */ .fiyat-ozet { background:var(--zemin); padding:66px 0; border-top:1px solid var(--cizgi) } .fiyat-ozet h2 { text-align:center } .fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px } .fkart { background:#fff; border:1px solid var(--cizgi); border-top:3px solid var(--urun); border-radius:var(--r-kart); padding:24px; display:flex; flex-direction:column; box-shadow:var(--golge-1) } .fbas { display:flex; align-items:center; gap:12px; margin-bottom:18px } .fbas .ik { width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; font:600 16px/1 Poppins } .fbas h3 { font:600 17px/1.3 Poppins } .ftutar { margin-bottom:14px } .ftutar .onek { display:block; font:500 11.5px/1 Poppins; color:var(--soluk); text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px } .ftutar > b { font:700 34px/1 Poppins; letter-spacing:-.03em; color:var(--urun) } .ftutar > span { font:500 15px/1 Poppins; color:var(--soluk) } .ftutar small { display:block; font:400 12.5px/1.5 Poppins; color:var(--soluk); margin-top:6px } .fnot { font:400 13.5px/1.6 Poppins; color:var(--metin); margin-bottom:16px } .fliste { list-style:none; margin:0 0 20px; flex:1 } .fliste li { position:relative; padding:0 0 9px 18px; font:400 13.5px/1.55 Poppins; color:var(--metin) } .fliste li::before { content:""; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--urun) } .fliste.eksi li::before { background:var(--soluk); border-radius:1px; height:2px; width:8px; top:10px } .fkart .dugme { align-self:flex-start; color:var(--urun); border-color:var(--urun) } .findirim { text-align:center; margin-top:30px; font:400 15px/1.7 Poppins; color:var(--metin) } .findirim b { color:var(--lacivert) } /* ayrıntılı fiyat sayfası */ .fiyat-sayfa { background:var(--zemin); padding:56px 0 70px } .fiyat-sayfa h1 { text-align:center } .alt.orta { margin:16px auto 44px; text-align:center; max-width:46em } .fblok { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:28px; margin-bottom:22px; box-shadow:var(--golge-1) } .fblok-bas { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--cizgi) } .fblok-bas .ik { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; font:600 19px/1 Poppins } .fblok-bas h2 { font:600 22px/1.3 Poppins; text-align:left } .fblok-bas p { font:400 14px/1.6 Poppins; color:var(--soluk); margin-top:4px } .fblok-bas .dugme { color:var(--urun); border-color:var(--urun); white-space:nowrap } .fetiket { font:600 10px/1 Poppins; text-transform:uppercase; letter-spacing:.07em; color:#fff; background:var(--urun); border-radius:999px; padding:4px 8px; font-style:normal } .ftek { display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:start } .ftek-fiyat { background:var(--zemin); border-radius:12px; padding:22px 26px; min-width:230px } .ftek-fiyat > b { font:700 42px/1 Poppins; letter-spacing:-.03em; color:var(--urun) } .ftek-fiyat > span { font:500 16px/1 Poppins; color:var(--soluk) } .ftek-fiyat small { display:block; font:400 13px/1.7 Poppins; color:var(--soluk); margin-top:10px } .fbaslik2 { display:block; font:600 11.5px/1 Poppins; color:var(--soluk); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px } .fbaslik2.haric { margin-top:6px } .findirim-kutu { background:var(--lacivert); color:#fff; border-radius:var(--r-kart); padding:32px; text-align:center; margin-top:8px } .findirim-kutu h2 { color:#fff; font-size:24px } .fikili { display:flex; gap:54px; justify-content:center; margin:22px 0 16px } .fikili > div > b { display:block; font:700 40px/1 Poppins; letter-spacing:-.03em; color:var(--turuncu) } .fikili span { display:block; font:400 13.5px/1 Poppins; color:#c6d4ec; margin-top:8px } .findirim-kutu p { font:400 14px/1.7 Poppins; color:#a8bede } @media (max-width:900px) { .fgrid { grid-template-columns:1fr } .ftek { grid-template-columns:1fr; gap:22px } .fblok-bas { grid-template-columns:auto 1fr } .fblok-bas .dugme { grid-column:1/-1; justify-content:center } } /* paket kartları (Ön Muhasebe · 4 paket, 2026-10-27'ye kadar 2'ydi) */ /* FİYAT SAYFASI DAHA GENİŞ ÇERÇEVE KULLANIR (kullanıcı kararı 2026-10-28: "ikinci satır olmaz, gerekirse çerçeveyi genişlet"). Ortak `.kap` 1240 px. Kârlılık'ın BEŞ kartı orada 212 px'e düşüyor ve fiyat rakamı ile kapsam listesi sıkışıyor. Fiyat sayfasında çerçeve 1440'a çıkıyor: beş kart 260 px, dört kart 336 px alıyor. `min(... , 100vw - 40px)` ŞART: sabit 1440 yazılsaydı 1300 px'lik bir ekranda sayfa yatay kayardı. Üst şerit ve menü kendi `.kap`larını kullanmaya devam ediyor — genişleyen yalnız fiyat bölümü. */ .fiyat-sayfa > .kap { max-width:min(1440px, calc(100vw - 40px)) } /* SÜTUN SAYISI KART SAYISINA UYAR (2026-10-28). Sabit `repeat(4,1fr)` iken Kârlılık'ın BEŞ kademesi 4+1 diziliyordu: beşinci kart tek başına alt satıra düşüyor ve kartlar farklı yükseklikte kalıyordu. `--adet` bileşenden geliyor. */ .fpaket-grid { display:grid; grid-template-columns:repeat(var(--adet,4),1fr); gap:14px } .fpaket { display:flex; flex-direction:column } /* Devralma satırı — ürün rengiyle, listeden önce. Alan adı Amazon'da `ek`, Kârlılık'ta `devir`; ikisi de aynı şeyi söylüyor. */ .fpaket-devir { margin:10px 0 0; font:500 12.5px/1.5 Poppins; color:var(--urun) } .fpaket { border:1px solid var(--cizgi); border-radius:12px; padding:20px 18px } .fpaket.one { border-color:var(--urun); background:color-mix(in srgb, var(--urun) 4%, #fff) } .fpaket-bas h3 { font:600 19px/1.3 Poppins; display:flex; align-items:center; gap:9px; flex-wrap:wrap } .fpaket-alt { display:block; font:500 13px/1 Poppins; color:var(--urun); margin-top:6px } .fpaket-fiyat { margin:16px 0 14px; padding-bottom:16px; border-bottom:1px solid var(--cizgi) } .ff-rakam { font:700 30px/1 Poppins; letter-spacing:-.03em; color:var(--urun) } .ff-birim { font:500 15px/1 Poppins; color:var(--soluk) } /* ÖDEME BİÇİMİ SEÇİCİSİ (kullanıcı isteği 2026-10-28). Kartlar yalnız yıllık karşılığı gösteriyordu; aylık tutar küçük gri satırın içinde kalıyordu. İKİ BİÇİM DE İŞARETLEMEDE, BİRİ GİZLİ. Varsayılan `:root`ta nitelik yokken geçerli, yani JavaScript çalışmasa da yıllık görünür — seçici bir eklenti, fiyatın görünme şartı değil. */ .ff-ay { display:none } :root[data-odeme="aylik"] .ff-yil { display:none } :root[data-odeme="aylik"] .ff-ay { display:block } /* Sağa yaslı: blok başlığının altındaki "Ürünü incele" düğmesiyle aynı hizada duruyor ve ürün adıyla yarışmıyor. `inline-flex` DEĞİL `flex`: satır içi ögede `margin-left:auto` hiçbir şey itmez, hap sola yapışık kalıyordu. Blok seviyesinde `flex` + `width` ikisini birden verir — hap içeriği kadar dar, kutu blok olduğu için auto kenar boşluğu sağa yaslıyor. */ .fodeme { display:flex; gap:3px; padding:3px; margin:0 0 14px auto; border:1px solid var(--cizgi); border-radius:999px; background:#fff; width:max-content } .fodeme button { font:600 13px/1 Poppins; color:var(--soluk); background:none; border:0; cursor:pointer; padding:9px 17px; border-radius:999px; white-space:nowrap; transition:background .15s, color .15s } .fodeme button:hover { color:var(--lacivert) } .fodeme button[aria-pressed="true"] { background:var(--urun); color:#fff } /* Klavye odağı görünür kalsın: seçili düğmede zemin zaten dolu. */ .fodeme button:focus-visible { outline:2px solid var(--urun); outline-offset:2px } /* Telefonda iki düğme yan yana tam genişlikte — hap daralıp okunmaz olmasın. */ @media (max-width:520px) { .fodeme { display:flex; width:100%; margin-right:0 } .fodeme button { flex:1; padding:10px 8px; font-size:12.5px } } .fpaket-fiyat small { display:block; font:400 12.5px/1.7 Poppins; color:var(--soluk); margin-top:8px } /* Kime göre olduğunu söyleyen satır YALNIZ ÖN MUHASEBEDE var ve italik (kullanıcı kararı 2026-10-28): kapsam listesi gibi okunmasın, kartın sahibini tarif eden bir not olduğu belli olsun. Kârlılık ve Amazon'da kaldırıldı — orada alt başlık zaten hacmi yazıyordu. */ .fpaket-icin { font:italic 400 13px/1.55 Poppins; color:var(--soluk); margin-bottom:14px } .fharic { grid-column:1/-1; background:var(--zemin); border-radius:12px; padding:18px 22px } .fharic .fliste { margin-bottom:0 } /* Dört kart 1100px altında yan yana okunmuyor: başlık sarıyor, fiyat etikete biniyor. Önce ikişerli, sonra tek sütun. */ @media (max-width:1100px) { .fpaket-grid { grid-template-columns:1fr 1fr } } @media (max-width:700px) { .fpaket-grid { grid-template-columns:1fr } } /* Hukuki metinlerdeki tablolar (çerez listesi, saklama süreleri, veri sorumlusu künyesi). Dar ekranda yatay kaydırılır: beş sütunlu çerez tablosunu telefona sığdırmak için sütun atmak gerekirdi ve atılacak sütun yok — "hangi çerez ne kadar saklanıyor" eşleşmesi tablonun kendisi. */ .hukuk-tablo-sar { overflow-x:auto; margin:14px 0 18px; -webkit-overflow-scrolling:touch } .hukuk-tablo { width:100%; min-width:520px; border-collapse:collapse; font:400 13.5px/1.6 Poppins } .hukuk-tablo th { background:var(--lacivert); color:#fff; text-align:left; font-weight:600; padding:10px 12px; vertical-align:top } .hukuk-tablo td { padding:10px 12px; border-bottom:1px solid var(--cizgi); color:var(--metin); vertical-align:top } .hukuk-tablo tr:last-child td { border-bottom:0 } .hukuk-tablo code { font:500 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--zemin); padding:2px 5px; border-radius:4px; color:var(--lacivert) } .hukuk-tablo a { color:var(--turuncu) } /* Ürün sayfasındaki fiyat bölümü: /fiyatlar'daki blok burada ÇERÇEVESİZ duruyor — bölümün kendi başlığı ve zemini (k-bolum k-gri) zaten var, üstüne bir kutu daha koymak kutu içinde kutu demekti. */ /* "Which plan fits" — /en/pricing'deki plan seçim bloğu (2026-10-27). Grid'i kendi kurmuyor, `.fpaket-grid`i kullanıyor: o kalıbın 4->2->1 kırılımı 1100 ve 700 px'te zaten denetlenmiş durumda. Burada yalnız kartın kendi görünümü var. */ .fsecim { margin:28px 0 0 } .fsecim h2 { font:600 24px/1.3 Poppins; text-align:center } .fsecim > .alt { text-align:center; margin:8px 0 20px } .fsecim-k { border:1px solid var(--cizgi); border-radius:12px; padding:18px 16px; background:#fff } .fsecim-k b { display:block; font:600 17px/1.3 Poppins } .fsecim-sinir { display:block; font:500 13px/1.5 Poppins; color:var(--lacivert); margin-top:5px } .fsecim-k p { font:400 13.5px/1.65 Poppins; color:var(--soluk); margin-top:10px } .fblok-sade { background:none; border:0; box-shadow:none; padding:0 } .fbolum-cikis { margin:20px 0 0; text-align:center; font:500 14px/1.6 Poppins } .fbolum-cikis a { color:var(--lacivert) } .fbolum-cikis a:hover { color:var(--turuncu) } /* Yapışık menü çapayı kapatmasın (diğer çapalarla aynı ölçü). */ #fiyat { scroll-margin-top:92px } .pk-not { margin:12px 0 0; font:400 12.5px/1.6 Poppins; color:var(--soluk) } .fkdv { color:var(--soluk); font-weight:500 } /* küçük notun içindeki vurgu, fiyat puntosunu miras almasın */ .fpaket-fiyat small b, .ftek-fiyat small b { font:600 12.5px/1.7 Poppins; color:var(--metin) } /* ══════════ BLOG ══════════ */ .kap.dar { max-width:760px } .blog-liste { background:var(--zemin); padding:56px 0 70px } .blog-liste h1 { text-align:center } .blog-kume { margin-top:44px } .blog-kume h2 { font-size:22px; margin-bottom:18px } /* Sırada üç kart (kullanıcı kararı 2026-09-27). Kapak görseli kartın genişliğine göre küçüldüğü için başlık üç sütunda da okunur kalıyor. */ .blog-kartlar { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px } /* Sol renk şeridi KALDIRILDI: kapak görselinin kendi şeridi var, ikisi yan yana kalın bir renk bandına dönüşüyordu (2026-09-27). */ .blog-kart { background:#fff; border:1px solid var(--cizgi); overflow:hidden; border-radius:var(--r-kart); box-shadow:var(--golge-1) } .blog-kart a { display:block } /* Kartta yazının KAPAĞI duruyor, kırpılmadan. Önce üst bandını kırpmayı denedik; kapağın alt kısmı görünmüyordu ve dar ekranda kırpma başlığın içine giriyordu (kullanıcı notu 2026-09-27). Kapak 1200x630 tasarlandı, kartta da o oranda basılıyor. */ .blog-kapak { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; border-bottom:1px solid var(--cizgi); transition:transform .3s cubic-bezier(.23,1,.32,1) } .blog-kart:hover .blog-kapak { transform:scale(1.02) } .blog-govde { display:block; padding:20px 24px 22px } .blog-kart h3 { font:600 17.5px/1.4 Poppins; color:var(--lacivert) } .blog-kart p { font:400 14px/1.65 Poppins; color:var(--metin); margin:9px 0 14px } .blog-alt { display:flex; gap:12px; align-items:center; font:400 12.5px/1 Poppins; color:var(--soluk) } .blog-urun { color:var(--urun); font-weight:600 } .blog-kart:hover { box-shadow:var(--golge-2) } .bos { text-align:center; color:var(--soluk); padding:40px 0 } /* yazı */ .yazi { background:#fff; padding:40px 0 72px } .kirinti { font:400 13px/1 Poppins; color:var(--soluk); margin-bottom:22px } .kirinti a { color:var(--lacivert-600) } .kirinti span { margin:0 6px } .yazi h1 { font-size:clamp(28px,3vw,40px); margin:0 0 22px } .yazi-bilgi { display:flex; align-items:center; gap:13px; font:400 13.5px/1.6 Poppins; color:var(--soluk); padding-bottom:26px; border-bottom:1px solid var(--cizgi) } .yazi-bilgi .av { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font:600 15px/1 Poppins; background:linear-gradient(135deg,var(--lacivert-700),var(--lacivert)) } .yazi-bilgi b { color:var(--lacivert) } /* alıntılanan kısım — motorlar buradan çekiyor */ .kisa-cevap { background:var(--zemin); border-left:3px solid var(--turuncu); border-radius:12px; padding:22px 26px; margin:28px 0 } .kc-etiket { display:block; font:600 11.5px/1 Poppins; letter-spacing:.1em; text-transform:uppercase; color:var(--soluk); margin-bottom:10px } .kisa-cevap p { font:400 16.5px/1.75 Poppins; color:var(--metin) } .icindekiler { border:1px solid var(--cizgi); border-radius:12px; padding:20px 24px; margin-bottom:32px } .icindekiler ol { margin:0; padding-left:20px } .icindekiler li { font:400 14.5px/1.9 Poppins } .icindekiler a { color:var(--lacivert-600) } .yazi-govde { font:400 16.5px/1.8 Poppins; color:var(--metin) } .yazi-govde h2 { font:600 25px/1.35 Poppins; color:var(--lacivert); margin:40px 0 14px; scroll-margin-top:92px } .yazi-govde h3 { font:600 18.5px/1.4 Poppins; color:var(--lacivert); margin:28px 0 10px } .yazi-govde p { margin-bottom:17px } .yazi-govde b, .yazi-govde strong { color:var(--lacivert); font-weight:600 } .yazi-govde a { color:var(--lacivert-600); text-decoration:underline; text-underline-offset:3px } .yazi-govde ul, .yazi-govde ol { margin:0 0 17px 22px } .yazi-govde li { margin-bottom:8px } .yazi-govde em { font-style:italic } .yazi-govde table { width:100%; border-collapse:collapse; margin:22px 0; font:400 14.5px/1.5 Poppins } .yazi-govde th { text-align:left; font:600 11.5px/1 Poppins; letter-spacing:.06em; text-transform:uppercase; color:var(--soluk); padding:11px 12px; border-bottom:1px solid var(--cizgi) } .yazi-govde td { padding:11px 12px; border-bottom:1px solid #f1f4f9 } .yazi-govde td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums } .yazi-govde tr:last-child td { border-bottom:0; font-weight:600; color:var(--lacivert) } .yazi-urun { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; margin-top:44px; padding:24px 26px; background:var(--zemin); border-left:3px solid var(--urun); border-radius:12px } .yazi-urun h3 { font:600 18px/1.3 Poppins; color:var(--urun); margin-bottom:5px } .yazi-urun p { font:400 14px/1.6 Poppins; color:var(--metin) } .ilgili-yazilar { margin-top:44px; padding-top:28px; border-top:1px solid var(--cizgi) } .ilgili-yazilar h2 { font-size:20px; margin-bottom:14px } .ilgili-yazilar ul { list-style:none } .ilgili-yazilar li { margin-bottom:10px } .ilgili-yazilar a { font:500 15.5px/1.5 Poppins; color:var(--lacivert-600) } @media (max-width:1040px) { .blog-kartlar { grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:760px) { .blog-kartlar { grid-template-columns:minmax(0,1fr) } } /* yazıdaki formül blokları */ .yazi-govde pre { background:var(--lacivert-900); color:#e8eef8; border-radius:10px; padding:16px 20px; margin:18px 0; overflow-x:auto; font:500 14.5px/1.6 ui-monospace,"SF Mono",Menlo,monospace } .yazi-govde pre code { background:none; padding:0; color:inherit } .yazi-govde code { background:var(--zemin); border-radius:5px; padding:2px 6px; font:500 14px/1 ui-monospace,"SF Mono",Menlo,monospace; color:var(--lacivert) } /* Yazi sonu SSS — ayni zamanda FAQPage yapisal verisi. Cevaplar GORUNUR; gizli icerikten sema uretilmez. */ .yazi-sss { margin-top:48px; padding-top:32px; border-top:2px solid var(--cizgi) } .yazi-sss > h2 { font:600 25px/1.35 Poppins; color:var(--lacivert); margin:0 0 20px } .yazi-sss .ss + .ss { margin-top:22px; padding-top:22px; border-top:1px solid var(--cizgi) } .yazi-sss h3 { font:600 17px/1.45 Poppins; color:var(--lacivert); margin:0 0 8px } .yazi-sss p { font:400 16px/1.75 Poppins; color:var(--metin); margin:0 } .yazi-sss b, .yazi-sss strong { color:var(--lacivert); font-weight:600 } .yazi-sss a { color:var(--turuncu-koyu); text-decoration:underline } /* ══════════════════ KÂRLILIK SAYFASI ══════════════════ Sınıflar k- önekli: .kart, .cta, .rozet, .pencere, .cubuk gibi adlar bu dosyanın başka yerlerinde de var ve aynı sayfada KiminIcin / FiyatOzet gibi bileşenlerle yan yana çalışıyor. Önek olmadan birbirlerini bozarlar. Kaynağı public/onizleme/karlilik-son.html prototipiydi. */ /* ── hero ── */ .k-hero { background:linear-gradient(170deg,#fbfcfe 0%,#eef2f9 100%); padding:56px 0 66px; border-bottom:1px solid var(--cizgi) } .k-hero .k-ikili { display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:48px; align-items:center } .k-rozet { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-rozet); padding:6px 14px; font:600 12.5px/1 Poppins; color:var(--lacivert); box-shadow:var(--golge-1); margin-bottom:16px } .k-rozet i { width:7px; height:7px; border-radius:50%; background:var(--vurgu) } .k-hero h1 { font:700 38px/1.18 Poppins; color:var(--lacivert); letter-spacing:-.6px } .k-hero h1 em { font-style:normal; color:var(--vurgu) } .k-hero .k-alt { font:400 15.5px/1.72 Poppins; color:var(--metin); margin:16px 0 24px } .k-cta { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:20px } .k-cta a { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-dugme); padding:14px 24px; font:600 15px/1 Poppins; transition:transform .16s cubic-bezier(.23,1,.32,1) } .k-cta a:active { transform:scale(.975) } .k-cta .k-dolu { background:var(--vurgu); color:#fff; box-shadow:0 6px 18px color-mix(in srgb, var(--vurgu) 30%, transparent) } .k-cta .k-bos { background:#fff; color:var(--lacivert); border:1.5px solid var(--cizgi) } .k-kucuk { margin:-8px 0 18px; font:500 13.5px/1.5 Poppins } .k-kucuk a { color:var(--vurgu-koyu); border-bottom:1px solid transparent; transition:border-color .16s ease-out } .k-kucuk a:hover { border-bottom-color:var(--vurgu-koyu) } .k-guven { display:flex; gap:16px; flex-wrap:wrap; font:500 13px/1.5 Poppins; color:var(--soluk) } .k-guven span { display:inline-flex; align-items:center; gap:6px } /* ── tarayıcı penceresi kabuğu ── */ .k-pencere { background:#fff; border-radius:14px; box-shadow:var(--golge-2); overflow:hidden; border:1px solid var(--cizgi) } .k-cubuk { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#f3f5fa; border-bottom:1px solid var(--cizgi) } .k-cubuk i { width:10px; height:10px; border-radius:50%; flex:none } .k-cubuk i:nth-child(1){ background:#ff5f57 } .k-cubuk i:nth-child(2){ background:#febc2e } .k-cubuk i:nth-child(3){ background:#28c840 } .k-cubuk .k-adres { flex:1; margin-left:8px; background:#fff; border:1px solid var(--cizgi); border-radius:6px; padding:4px 11px; font:400 11.5px/1.5 Poppins; color:var(--soluk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* ── hesap kutusu ── */ .k-hesap { padding:22px } .k-hesap .k-hb { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:16px } .k-hesap .k-hb b { font:600 15px/1 Poppins; color:var(--lacivert) } .k-pz { display:flex; gap:5px } .k-pz button { border:1px solid var(--cizgi); background:#fff; border-radius:7px; padding:6px 12px; font:500 11.5px/1 Poppins; color:var(--soluk); cursor:pointer; transition:background .14s ease-out, color .14s ease-out } .k-pz button[aria-pressed="true"] { background:var(--lacivert); color:#fff; border-color:var(--lacivert) } .k-alan { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px } .k-alan label { display:block; font:500 12px/1 Poppins; color:var(--soluk); margin-bottom:6px } .k-alan .k-kutu { position:relative } .k-alan input { width:100%; border:1.5px solid var(--cizgi); border-radius:9px; padding:12px 30px 12px 12px; font:600 16px/1 Poppins; color:var(--lacivert); outline:none; background:#fff; caret-color:var(--vurgu) } .k-alan input:focus { border-color:var(--vurgu) } .k-alan .k-birim { position:absolute; right:12px; top:50%; transform:translateY(-50%); font:600 14px/1 Poppins; color:var(--soluk) } @keyframes k-halka { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--vurgu) 34%, transparent) } 70% { box-shadow:0 0 0 9px transparent } 100% { box-shadow:0 0 0 0 transparent } } .k-alan input.k-dikkat { animation:k-halka 1.5s cubic-bezier(.23,1,.32,1) 2 } @media (prefers-reduced-motion: reduce) { .k-alan input.k-dikkat { animation:none } } .k-dokum { border-top:1px dashed var(--cizgi); padding-top:12px } .k-sat { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; font:400 13.5px/1.5 Poppins; color:var(--metin) } .k-sat b { font-weight:500; color:var(--lacivert); white-space:nowrap } .k-sat.k-eksi b { color:var(--kirmizi) } .k-sat.k-net { margin-top:8px; padding-top:12px; border-top:2px solid var(--lacivert); font:600 15px/1.35 Poppins; color:var(--lacivert) } .k-sat.k-net b { font:700 23px/1 Poppins; color:var(--yesil) } .k-sat.k-net b.k-kotu { color:var(--kirmizi) } .k-sat.k-net small { display:block; font:400 12px/1.4 Poppins; color:var(--soluk) } .k-not { margin-top:12px; font:400 11.5px/1.6 Poppins; color:var(--soluk) } .k-not b { color:var(--metin); font-weight:600 } /* ── bölüm kabuğu ── */ .k-bolum { padding:66px 0 72px } .k-bolum.k-gri { background:var(--zemin) } .k-bbas { text-align:center; max-width:640px; margin:0 auto 38px } .k-bbas h2 { font:700 29px/1.28 Poppins; color:var(--lacivert); letter-spacing:-.4px } .k-bbas p { font:400 15.5px/1.72 Poppins; color:var(--metin); margin-top:12px } /* ── kart ızgaraları ── */ .k-uclu { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .k-kart { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:24px; box-shadow:var(--golge-1) } .k-kart .k-ik { width:40px; height:40px; border-radius:11px; background:color-mix(in srgb, var(--vurgu) 12%, #fff); display:grid; place-items:center; color:var(--vurgu-koyu); margin-bottom:14px } .k-kart .k-no { width:30px; height:30px; border-radius:9px; background:var(--lacivert); color:#fff; display:grid; place-items:center; font:700 13px/1 Poppins; margin-bottom:13px } .k-kart h3 { font:600 16.5px/1.4 Poppins; color:var(--lacivert); margin-bottom:7px } .k-kart p { font:400 14px/1.7 Poppins; color:var(--metin) } /* ── Amazon ürün sayfası: özellik listesi ── 21 madde dört başlık altında. Sayfası YAZILMIŞ olan bağlantı, yazılmamış olan düz metin: menüdeki `hazir` mekanizmasıyla aynı ayrım, böylece ziyaretçi tıkladığı her bağlantıda içerik buluyor. */ .a-gruplar { display:grid; grid-template-columns:repeat(4,1fr); gap:18px } .a-grup { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:20px 22px; box-shadow:var(--golge-1) } .a-grup h3 { font:600 13px/1 Poppins; color:var(--vurgu-koyu); text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px } .a-grup ul { list-style:none; display:flex; flex-direction:column; gap:1px } .a-grup li { font:400 14px/1.5 Poppins; padding:6px 0; border-bottom:1px solid #f1f4f9 } .a-grup li:last-child { border-bottom:0 } .a-grup a { color:var(--lacivert); font-weight:500 } .a-grup a:hover { color:var(--vurgu-koyu); text-decoration:underline } /* Yazılmamış madde soluk: tıklanabilir sanılıp boşa tıklanmasın. */ .a-grup span { color:var(--soluk) } @media (max-width:980px) { .a-gruplar { grid-template-columns:repeat(2,1fr) } } @media (max-width:560px) { .a-gruplar { grid-template-columns:1fr } } /* ── panel turu ── */ .k-tur { border:1px solid var(--cizgi); border-radius:var(--r-kart); overflow:hidden; box-shadow:var(--golge-2); background:#fff } /* Ray MUTLAK konumlu: ızgarada satır yüksekliğini rayın 35 maddesi belirliyordu; sabit max-height verince de ray görselden kısa kalıp altında boşluk bırakıyordu (kullanıcı düzeltmesi 2026-09-27). Artık yükseklik EKRAN GÖRÜNTÜSÜNDEN geliyor, ray onu dolduruyor. */ .k-govde { display:block; position:relative } .k-ekran { margin-left:190px } /* Ray, ekran görüntüsünden uzun olabilir: ön muhasebede program menüsü kadar madde var. Kendi içinde dikey kayar, panel yüksekliği büyümez (kullanıcı kararı 2026-09-27). Kârlılıkta on madde sığıyor, kaymıyor. */ .k-yan { background:var(--lacivert); padding:13px 9px; display:flex; flex-direction:column; gap:3px; position:absolute; left:0; top:0; bottom:0; width:190px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent } .k-yan::-webkit-scrollbar { width:7px } .k-yan::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28); border-radius:4px } .k-yan::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.42) } .k-yan::-webkit-scrollbar-track { background:transparent } /* Marka başlığı kayarken kaybolmasın. */ .k-yan .k-marka { position:sticky; top:-13px; background:var(--lacivert); z-index:1 } .k-yan .k-marka { padding:6px 10px 13px } /* Logo oranı 373×80; genişlik verip yüksekliği serbest bırakmak oranı korur. Yazıyla aynı optik ağırlıkta dursun diye 108px. */ .k-yan .k-marka img { display:block; width:108px; height:auto } .k-yan button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; cursor:pointer; border-radius:8px; padding:10px; font:500 12.5px/1.35 Poppins; color:#b9c8e0; transition:background .14s ease-out, color .14s ease-out } .k-yan button:hover { background:rgba(255,255,255,.08); color:#fff } .k-yan button[aria-selected="true"] { background:var(--vurgu); color:#fff; font-weight:600 } .k-ekran { background:#fbfcfe; position:relative; min-width:0 } .k-ekran > div[hidden] { display:none } .k-kaydir { overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0; max-width:100% } /* KESİK GÖRSEL SOLAR, DÜZ KESİLMEZ (2026-10-28, kullanıcı bildirdi). Panel görseli telefonda 760 px'te kalıp çerçeve içinde kayıyor (bkz. CLAUDE.md "Panel görseli küçültülmez, kaydırılır"). Kenar düz kesilince sağdaki sütun kelime ortasından kopuyor ve ziyaretçi bunu kaydırma değil TAŞMA diye okuyor — şeritte aynı şey olmuştu, çözüm de aynı. VARSAYILAN MASKE YOK: masaüstünde görsel zaten sığıyor ve script çalışmazsa olmayan bir kesik için solma göstermek yanlış olurdu. Sınıfları PanelTuru'nun script'i koyuyor — kaydırma konumu CSS'ten sorulamıyor. */ .k-kaydir.solda-var, .k-kaydir.sagda-var { -webkit-mask-image:linear-gradient(90deg,var(--sol,#000) 0,#000 26px, #000 calc(100% - 26px),var(--sag,#000) 100%); mask-image:linear-gradient(90deg,var(--sol,#000) 0,#000 26px, #000 calc(100% - 26px),var(--sag,#000) 100%) } .k-kaydir.solda-var { --sol:transparent } .k-kaydir.sagda-var { --sag:transparent } .k-ekran img { display:block; width:100%; height:auto } /* Panelin kendi sekmeleri (ikinci katman). Sol raydan AYRI bir biçim: ray ekranı seçer, bu şerit o ekranın kırılımını. İkisi aynı görünürse hangisinin neyi değiştirdiği anlaşılmıyor. */ .k-alts { display:flex; gap:2px; padding:0 14px; background:#fff; border-bottom:1px solid var(--cizgi); overflow-x:auto } .k-alts button { background:none; border:0; cursor:pointer; white-space:nowrap; padding:11px 12px; font:500 12.5px/1 Poppins; color:var(--soluk); border-bottom:2px solid transparent } .k-alts button:hover { color:var(--lacivert) } .k-alts button[aria-selected="true"] { color:var(--lacivert); font-weight:600; border-bottom-color:var(--vurgu) } .k-aciklama { background:#fff; border-top:1px solid var(--cizgi); padding:26px 28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:34px } .k-aciklama[hidden] { display:none } .k-aciklama h3 { font:600 19px/1.35 Poppins; color:var(--lacivert); margin-bottom:9px } .k-aciklama .k-oz { font:400 14.5px/1.72 Poppins; color:var(--metin) } .k-aciklama .k-mb { font:600 11px/1 Poppins; letter-spacing:.5px; text-transform:uppercase; color:var(--soluk); margin-bottom:12px } .k-aciklama ul { list-style:none; display:grid; gap:10px; margin:0; padding:0 } .k-aciklama li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font:400 14px/1.65 Poppins; color:var(--metin) } .k-aciklama li svg { margin-top:4px } .k-ipucu { display:none } /* ── panel turu: Amazon teması ── Değerler Amazon panelinin kendi tasarım dosyasından (AMAZON/web/app/ globals.css): kenar çubuğu #f5f6fa, içerik zemini #f4f5f7, kenarlık navy-100, aktif madde accent yüzey + turuncu şerit. Landing paletiyle çizmek üç kez geri döndü (kullanıcı düzeltmeleri 2026-10-04). */ .k-amazon .k-yan { background: #f5f6fa; border-right: 1px solid var(--a-bor); font-family: var(--a-yazi) } .k-amazon .k-yan .k-marka { background: #f5f6fa; padding-bottom: 10px } .k-urunad { display: block; font: 400 10px/1 var(--a-yazi); color: var(--a-mut); margin-top: 5px } .k-amazon .k-yan .k-grup { color: var(--a-mut); font: 500 10px/1 var(--a-yazi); letter-spacing: .06em; text-transform: uppercase; padding: 16px 10px 6px } .k-yan button svg { width: 15px; height: 15px; flex: none; opacity: .8 } .k-amazon .k-yan button { color: var(--a-fg); font: 400 12.5px/1.35 var(--a-yazi); border-left: 3px solid transparent; border-radius: 0 6px 6px 0; padding: 9px 10px } .k-amazon .k-yan button:hover { background: var(--a-acc) } .k-amazon .k-yan button[aria-selected='true'] { background: var(--a-acc); color: var(--a-fg); font-weight: 500; border-left-color: var(--a-act) } .k-amazon .k-yan button[aria-selected='true'] svg { opacity: 1; color: var(--a-act) } .k-amazon .k-ekran { background: var(--a-bg) } /* ── pazaryeri şeridi ── */ .k-pzlar { display:flex; justify-content:center; gap:14px; flex-wrap:wrap } .k-pzkart { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-rozet); padding:10px 20px; font:600 14px/1 Poppins; color:var(--lacivert); box-shadow:var(--golge-1) } .k-pzkart img { height:20px; width:auto; max-width:64px; object-fit:contain; display:block } /* ── blog kartları ── */ .k-yazilar { display:grid; grid-template-columns:repeat(4,1fr); gap:16px } .k-yazi { display:block; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:20px; transition:border-color .16s ease-out } .k-yazi:hover { border-color:var(--vurgu) } .k-yazi span { font:600 10.5px/1 Poppins; letter-spacing:.4px; text-transform:uppercase; color:var(--turuncu-koyu) } .k-yazi h3 { font:600 15px/1.45 Poppins; color:var(--lacivert); margin:10px 0 0 } /* ── mobil ── */ @media (max-width:1040px) { .k-aciklama { grid-template-columns:1fr; gap:24px } .k-yazilar { grid-template-columns:1fr 1fr } } @media (max-width:860px) { .k-hero { padding:40px 0 48px } .k-hero .k-ikili { grid-template-columns:1fr; gap:30px } /* `.k-hero .ikili` DE BURADA OLMAK ZORUNDA (2026-10-27, telefonda ölçüldü). `/amazon` ve `/en` hero'larında kap `.k-ikili` değil `.ikili`; o sınıfın mobil kuralı ise `.hero .ikili` ve `.urunhero .ikili` seçicilerine bağlıydı, ikisi de bu sayfalarda yok. Sonuç: 390 px'te hero İKİ SÜTUN kalıyordu — metin sütunu 145 px'e iniyor (satır başına iki kelime), panel görseli 134 px'e sıkışıp metnin üstüne biniyordu. `body { overflow-x:hidden }` taşmayı gizlediği için ölçüm "taşma yok" diyordu; kusur görünmüyordu ama oradaydı. Kardeş ürün sayfaları (`/karlilik`, `/muhasebe`) `.k-ikili` kullandığı için etkilenmemişti — bu yüzden gözden kaçtı. */ .k-hero .ikili { grid-template-columns:1fr; gap:30px } .k-hero .pencere { width:100%; max-width:100% } .k-hero h1 { font-size:29px } .k-cta { flex-direction:column; align-items:stretch } .k-cta a { width:100% } .k-bolum { padding:48px 0 54px } .k-bbas h2 { font-size:24px } .k-uclu { grid-template-columns:1fr } /* minmax(0,1fr): duz "1fr" izgara cocugunun icerigi kadar buyumesine izin veriyor, yatay kaydirma calismiyordu — menu 1806 px genisleyip sayfayi tasiriyordu. min-width:0 da ayni sebepten. */ .k-govde { display:block } .k-ekran { margin-left:0 } .k-yan { position:static; width:auto } .k-yan { flex-direction:row; overflow-x:auto; overflow-y:visible; max-height:none; gap:6px; padding:10px; scrollbar-width:none; min-width:0; max-width:100% } .k-yan::-webkit-scrollbar { display:none } .k-yan .k-marka { display:none } .k-yan button { width:auto; white-space:nowrap; flex:none; padding:9px 13px } /* PANEL ÇİZİMLERİ DE RESİMLER GİBİ DAVRANMALI (2026-10-27, telefonda ölçüldü ve kullanıcı ekran görüntüsüyle gösterdi). Burada yalnız `img` vardı. Kârlılık turu gerçek EKRAN GÖRÜNTÜSÜ kullandığı için kural ona yetiyordu; Amazon ve Ön Muhasebe turları ise 2026-10-04'te CSS ÇİZİMİNE geçti (`.pz`) ve çizim resim değil DOM. Doğal genişliği olmadığı için 390 px'e sıkışıyor, ızgara sütunları üst üste biniyor ve rakamlar birbirinin üstüne yazılıyordu ("$14,099" ile "$14,862" aynı piksellerde). Çözüm resimdekinin aynısı: doğal genişlikte kal, kap yana kaydırsın — altındaki "Ekranı görmek için yana kaydırın →" ipucu zaten bunu söylüyordu ama kaydıracak bir şey yoktu. */ /* GENİŞLİK SABİT 760, `auto` DEĞİL (2026-10-27, kullanıcı yakaladı: *"kârlılığın ürün gezme aracı diğerlerine göre çok büyük"*). `width:auto` + `min-width:760px` çizimde 760 veriyordu (blok öğenin doğal genişliği yok) ama RESİMDE doğal pikseli: kârlılık turundaki ekran görüntüleri 2× yakalandığı için 1806 px basılıyordu — çizimlerin 2,4 katı. Aynı bölümde iki farklı ölçek, aynı üründe değilmiş gibi duruyordu. Sabit genişlik ikisini eşitliyor: ekran görüntüsü 760'a iniyor (2× yakalandığı için netliği de korunuyor), çizim 760'ta kalıyor. */ .k-kaydir > img, .k-kaydir > .pz { width:760px; max-width:none; min-width:760px } .k-ipucu { display:flex; align-items:center; justify-content:center; gap:7px; padding:9px; background:#f3f5fa; border-top:1px solid var(--cizgi); font:500 11.5px/1 Poppins; color:var(--soluk) } .k-aciklama { padding:22px 20px } } /* HERO İÇİNDEKİ PANEL TABLOLARI (2026-10-27). `.pencere` tarayıcı çerçevesi çiziyor ve içinde gerçek bir panel tablosu var (`.sp` Sponsored Ads, `.nk` nakit takvimi). Hero iki sütundan tek sütuna inince genişlik 390 px'e düşüyor ve tablo içeride eziliyordu: sütunlar çakışıp rakamlar üst üste biniyordu. Çözüm tur bölümündekiyle aynı desen: tablo doğal genişliğinde kalır, ÇERÇEVE yana kaydırır. Sayfanın kendisi kaymaz — kaydırma `.pencere` içinde kapanır. `min-width` 560: iki panelin de en dar okunabilir hâli. Daha düşüğünde başlık satırı sarıyor, daha yükseğinde telefonda ilk bakışta tablonun yalnız üçte biri görünüyor. */ @media (max-width:860px) { .k-hero .pencere, .hero .pencere, .urunhero .pencere { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none } .k-hero .pencere::-webkit-scrollbar, .hero .pencere::-webkit-scrollbar, .urunhero .pencere::-webkit-scrollbar { display:none } .pencere > .sp, .pencere > .nk { min-width:560px } /* Adres çubuğu da tabloyla birlikte kaysın, yoksa kaydırınca çerçevenin üstü yerinde kalıp kopuk duruyor. */ .pencere > .cubuk { min-width:560px } /* ÜÇÜNCÜ GÖRSEL DE AYNI ÖLÇÜDE (2026-10-27). Ana sayfa hero'su ürün seçicisine göre üç görsel değiştiriyor: Amazon `.sp`, ön muhasebe `.nk`, Kârlılık ise EKRAN GÖRÜNTÜSÜ (`img`) — çizim değil, çünkü o ürünün demosu kurgusal veriyle çalışıyor ve maskeleme gerektirmiyor (CLAUDE.md "Görseller"). Yukarıdaki iki kural sınıf adıyla yazıldığı için resim kapsam dışında kalıyordu: iki kardeşi 560 px'te okunurken resim 309 px'e eziliyor, rakamları seçilmiyordu. Bu kusur bugüne kadar GÖRÜNMÜYORDU çünkü panelin kendisi mobilde `max-width:calc(100vw - 680px)` yüzünden 2 px'e iniyordu — yani hiç basılmıyordu. Panel düzelince altındaki bu eksik ortaya çıktı. */ .pencere.gorsel-kat > div { min-width:560px } .pencere.gorsel-kat > div > img { display:block; width:100%; height:auto } } @media (max-width:520px) { .k-alan { grid-template-columns:1fr } .k-yazilar { grid-template-columns:1fr } .k-hero h1 { font-size:25px } .k-sat.k-net b { font-size:20px } } /* ══════════════ ORTAK KABUK — MOBİL ══════════════ Üst şerit ve ana menü masaüstü için kurulmuştu ve dar ekranda taşıyordu: 390 px genişlikte sayfa 603 px YATAY kayıyordu — dört sayfada da aynı rakam, yani kabuk kaynaklı. Şerit nav'ı mutlak konumla ortalanıyor, menü nav'ı tek satır flex; ikisi de daralmıyor. Şerit yatay kaydırmalı kaldı (ürün değiştirici, üç kısa madde). Ana menü ise 2026-09-25'te hamburger çekmecesine geçti. KIRILMA NOKTASI 1010px — 900 değil. Ölçüldü: başlığın masaüstü hâli (logo + 6 bağlantı + iki düğme) 911px yer istiyor, yan boşluklarla birlikte ancak 1020px'te sığıyor. 900'de bırakınca 901–1010 arası (tablet yatay, küçük dizüstü) başlık 110px'e kadar sağa kayıyordu. */ @media (max-width:1010px) { /* şerit: ortalamayı bırak, akışa gir, taşarsa kaydır. TEK SATIR, SARMIYOR (2026-10-27). Önce `flex-wrap:wrap` vardı ve telefonda dil düğmeleri alt satıra düşüyordu: şerit 46 px yerine 90 px yer kaplıyordu — 844 px'lik bir ekranın %11'i, üstelik ilk ekranda, yani hero'nun düğmesi kadranın dışına itiliyordu. Nav artık daralabilen (`min-width:0`) tek esnek sütun, dil bloğu sabit genişlikte yanında. SAĞ KENARDA SOLMA VAR, ÇÜNKÜ KESİK YAZI BOZUK GÖRÜNÜYOR. Üç ürün adı dar ekrana sığmıyor (ölçüldü: 414 px içerik, 273 px yer) ve nav zaten yatay kaydırmalı. Kaydırma ipucu olmadan son ad kelime ortasından kesiliyor ("Amazon Yönetimi" → "Amo") ve ziyaretçi bunu kırık sayfa diye okuyor. Solma, kesilmenin kasıtlı olduğunu söylüyor. Adları kısaltmak (Kârlılık / Muhasebe / Amazon) denenmedi: üçü kısa hâlleriyle bile 286 px istiyor, yine sığmıyordu — ve ürün adlarını ekranda değiştirmek, aynı ürünü iki ayrı adla anmak olurdu. */ .serit .kap { justify-content:space-between; height:auto; padding-top:6px; padding-bottom:6px; flex-wrap:nowrap; gap:10px } .serit nav { position:static; transform:none; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-right:2px } .serit nav::-webkit-scrollbar { display:none } /* SOLMA HANGİ TARAFTA İÇERİK SAKLIYSA ORADA (2026-10-27). Şerit açılışta aktif ürünü ortalıyor (Serit.astro), yani Amazon sayfasında soldaki iki ürün de kesiliyor — tek taraflı solma o kenarı yine "bozuk" gösterirdi. Sınıfları şeridin kendi script'i koyuyor. VARSAYILAN SAĞ SOLMA, JS'SİZ HÂL İÇİN: telefonda üç ürün zaten sığmıyor, yani script çalışmasa bile doğru taraf soluyor. Script çalışınca durum neyse ona göre düzeltiyor. */ .serit nav { --sol:#000 0px; --sag:transparent 100%; -webkit-mask-image:linear-gradient(90deg,var(--sol),#000 26px,#000 calc(100% - 26px),var(--sag)); mask-image:linear-gradient(90deg,var(--sol),#000 26px,#000 calc(100% - 26px),var(--sag)) } .serit nav.solda-var { --sol:transparent 0px } .serit nav.sagda-yok { --sag:#000 100% } .serit nav a { white-space:nowrap; min-height:38px; display:inline-flex; align-items:center } .serit .sag { flex:none } /* Parmakla basılabilir hedef: "Destek" 12px yüksekliğindeydi, ölçüldü 2026-09-25. Şeritteki her bağlantı en az 38px'e çıkarıldı. */ .serit .sag { font-size:12px; gap:4px } .serit .sag > a { min-height:38px; display:inline-flex; align-items:center; padding:0 8px } /* Dil düğmeleri: min-height kutuyu şişiriyordu. Dokunma alanı görünmez bir katmanla büyütülüyor, hap biçimi olduğu gibi kalıyor. */ .serit .dil a { position:relative } .serit .dil a::after { content:''; position:absolute; inset:-9px -3px } } /* ── ANA MENÜ ÇEKMECEYE 1240 px'TE GİRER, ŞERİTTEN AYRI ────────────────── Bu kurallar 2026-10-28'e kadar yukarıdaki 1010 px'lik şeridin içindeydi. İki satır aynı eşiği paylaşamaz: şerit kısa (üç ürün adı + dil), ana menü uzun (logo + altı bağlantı + iki düğme). 1010 ÖLÇÜMÜ ESKİMİŞTİ. Blokun başındaki not "masaüstü başlığı 911 px yer istiyor, 1020'de sığıyor" diyordu ve o gün doğruydu; menü o günden beri büyüdü (Entegrasyonlar maddesi, hap biçimli hesaplayıcı kısayolu). Bugün ölçüldü: satır 1231 px istiyor. Yani 1010–1230 arasında menü ZATEN taşıyordu — görünmüyordu çünkü düğmeler ve hap sararak yer açıyordu ("Giriş Yap" iki satıra, "Ücretsiz Dene" iki satıra bölünüyordu). Sarma bir çözüm değil, taşmanın gizlendiği yer: hap biçimli bağlantı sarınca hap olmaktan çıkıyor ve başlık 74'ten 100 px'e kalkıyor. Eşik ölçülen gereksinimin üstüne alındı; sığmayan menü sarmak yerine çekmeceye giriyor. Menüye yeni madde eklenirse bu sayı yeniden ölçülmeli — kendiliğinden fark edilmez. */ @media (max-width:1240px) { /* menü: logo solda, hamburger sağda; bağlantılar çekmecede. Önceki hâl tek satır yatay kaydırmaydı — taşmıyordu ama "Fiyatlar" kenardan kesik görünüyor, ziyaretçi kaydırılabildiğini fark etmiyordu. */ /* Hamburger'in SOLUNDA, ondan önce: ziyaretçi menüyü açmadan görüyor. `margin-left:auto` burada — hamburger'deki aynı kural ikisini birden sağa itiyordu, ikisi arasında boşluk kalmıyordu. */ /* BOŞLUĞU MARKA YUTAR, HESAPLA DEĞİL. `.menu-hesap`e `margin-left:auto` verince satırdaki bütün boş alanı o alıyor ve `flex-wrap:wrap` açık olduğu için HAMBURGER ALT SATIRA DÜŞÜYORDU — başlık 112 px'e çıkıyordu. Aynı itmeyi markanın sağ kenarından yapınca ikisi de aynı satırda kalıyor. */ /* BAŞLIK SATIRI 4 PX'E TAKILIYORDU. Ölçüldü: içerik alanı 311 px (375 − 2×32 dolgu), gereken 315 px (logo 140 + boşluk 10 + Hesapla 103 + boşluk 10 + hamburger 42 + 10 px fazladan kenar). Dördü birden sığmayınca hamburger alt satıra düşüyor ve başlık 112 px'e çıkıyordu. Üç yerden yer açıldı: hamburger'in gereksiz kenarı (zaten `gap:10px` var), menü kabının yan dolgusu 32 → 20, logo 140 → 118. Yeni hesap: 118 + 10 + 103 + 10 + 42 = 283 ≤ 320 (360 px'te) ≤ 280 (320 px'te logo 104'e iniyor). */ .menu .kap { padding-left:20px; padding-right:20px } .menu .kap > .marka { margin-right:auto } .menu .marka img { width:118px; height:auto } /* İKİ SATIRLIK AD (2026-10-28). Tek kelimelik "Hesapla" neyin hesaplandığını söylemiyordu. Ad uzayınca tek satırda 130 px'e çıkıyor ve logo + hamburger ile aynı satıra sığmıyordu; iki satır genişliği ~78 px'te tutuyor. Yükseklik 40 px'lik parmak hedefini bozmuyor çünkü iki satır 11×1,25×2 = 27,5 px. */ .menu-hesap { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:5px 13px; border-radius:14px; background:color-mix(in srgb, var(--lacivert) 7%, #fff); border:1px solid color-mix(in srgb, var(--lacivert) 16%, #fff); font:600 11px/1.25 Poppins; color:var(--lacivert) } /* Hap değil yuvarlak köşeli dikdörtgen: iki satırlık metni 999 px'lik yarıçap yanlardan sıkıştırıyordu. */ .mh-ad { text-align:left } .menu-hesap svg { opacity:.75; flex:none } .menu-hesap:active { background:color-mix(in srgb, var(--lacivert) 12%, #fff) } .mobil-ac { display:block; margin-left:0 } .menu .kap { height:auto; gap:10px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap } .menu nav, .menu .islem { display:none } .menu.gezinme-acik nav { display:flex; flex-direction:column; align-items:stretch; width:100%; flex:1 1 100%; gap:0; order:3; border-top:1px solid var(--cizgi); margin-top:2px; padding-top:4px } .menu.gezinme-acik nav > a, .menu.gezinme-acik .mega-ac { width:100%; padding:14px 2px; border-bottom:1px solid var(--cizgi); border-radius:0; opacity:1; justify-content:space-between } .menu.gezinme-acik nav > a:last-child { border-bottom:0 } /* Vurgulu madde hap biçimini korusun, satır çizgisi almasın. */ /* align-self:center masaüstü kuralından geliyor; çekmecede hapı ortalıyordu. */ .menu.gezinme-acik nav > a.one-cikan { border-bottom:0; width:max-content; align-self:flex-start; padding:10px 16px; margin:10px 0 } .menu.gezinme-acik .islem { display:flex; width:100%; flex:1 1 100%; order:4; gap:10px; padding:12px 0 4px; border-top:1px solid var(--cizgi) } .menu.gezinme-acik .islem .dugme { flex:1; justify-content:center } } @media (max-width:560px) { /* Dar ekranda yazı küçülüyor ama düğme parmakla basılabilir kalmalı: yükseklik 31px'e inmişti (ölçüldü 2026-09-25). */ .menu .islem .dugme { padding:0 14px; font-size:13px; min-height:40px; align-items:center } } /* Alt bilgi dort sutunlu sabit izgara; 390 px'te sutunlar sigmayip sayfayi 121 px yatay kaydiriyordu. Ust duzey bolumleri tek tek gizleyerek bulundu — yalniz footer gizlenince tasma sifira dusuyordu. */ @media (max-width:900px) { footer .kap { grid-template-columns:1fr 1fr; gap:28px } } @media (max-width:520px) { footer .kap { grid-template-columns:1fr; gap:22px } /* `.alt2` dar ekranda yan yana iki sütun olarak sıkışıyor; feragat da altında tek sütun kalsın diye akış dikeye çevriliyor. */ footer .alt2 { flex-direction:column; gap:4px } footer .alt-feragat { font-size:11px } } /* ══════════════════ ÖN MUHASEBE SAYFASI ══════════════════ k- ile başlayan sınıflar ÜRÜN SAYFALARININ ORTAK stilleridir (kârlılıkta doğdular, bu sayfa da kullanıyor): k-hero, k-bolum, k-kart, k-uclu, k-cta, k-pencere, k-cubuk… Buradaki m- önekliler yalnız bu sayfaya ait. */ /* ── akış zinciri ── */ .m-akis { padding:26px 24px } .m-ab { font:600 14.5px/1 Poppins; color:var(--lacivert); margin-bottom:3px } .m-an { font:400 12.5px/1.5 Poppins; color:var(--soluk); margin-bottom:24px } .m-zincir { display:grid } .m-ist { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:13px; align-items:center; padding:11px 0; position:relative; opacity:.34; transition:opacity .45s ease-out } .m-ist.aktif, .m-ist.bitti { opacity:1 } .m-im { width:34px; height:34px; border-radius:11px; background:var(--zemin); display:grid; place-items:center; color:var(--soluk); position:relative; z-index:2; transition:background .35s ease-out, color .35s ease-out } .m-ist.aktif .m-im { background:var(--urun); color:#fff } .m-ist.bitti .m-im { background:#e7f6ee; color:var(--yesil) } .m-ist b { display:block; font:600 13.5px/1.4 Poppins; color:var(--lacivert) } .m-ist span { font:400 12px/1.4 Poppins; color:var(--soluk) } .m-tik { font:600 11px/1 Poppins; color:var(--yesil); opacity:0; transition:opacity .3s ease-out } .m-ist.bitti .m-tik { opacity:1 } .m-ist::before { content:''; position:absolute; left:16.5px; top:-11px; bottom:-11px; width:1.5px; background:var(--cizgi); z-index:1 } .m-ist:first-child::before { top:50% } .m-ist:last-child::before { bottom:50% } .m-ist.bitti::before { background:#bfe6d1 } .m-anot { margin-top:18px; padding-top:14px; border-top:1px dashed var(--cizgi); font:400 12px/1.6 Poppins; color:var(--soluk) } .m-anot b { color:var(--lacivert); font-weight:600 } /* ── modül haritası ── */ .m-moduller { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .m-grup { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:22px 24px; box-shadow:var(--golge-1) } .m-grup h3 { display:flex; align-items:center; gap:10px; font:600 16px/1.3 Poppins; color:var(--lacivert); margin-bottom:14px } .m-grup h3 .m-gik { width:32px; height:32px; border-radius:9px; background:var(--zemin); display:grid; place-items:center; color:var(--urun); flex:none } .m-grup ul { list-style:none; margin:0; padding:0; display:grid; gap:7px } .m-grup li { font:400 13.5px/1.55 Poppins; color:var(--metin); display:grid; grid-template-columns:14px minmax(0,1fr); gap:9px; align-items:start } .m-grup li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--urun); opacity:.5; margin-top:8px } /* ── ayırt edici özellikler ── */ .m-ayirt { display:grid; grid-template-columns:repeat(2,1fr); gap:16px } .m-ozellik { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:22px 24px; display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px } .m-ozellik svg { margin-top:3px } .m-ozellik b { display:block; font:600 15.5px/1.4 Poppins; color:var(--lacivert); margin-bottom:6px } .m-ozellik p { font:400 13.5px/1.7 Poppins; color:var(--metin) } /* ── entegrasyon listeleri ── */ .m-ent { display:grid; gap:24px } .m-entgrup .m-etiket { font:600 11.5px/1 Poppins; letter-spacing:.4px; text-transform:uppercase; color:var(--soluk); margin-bottom:12px } .m-rozetler { display:flex; flex-wrap:wrap; gap:8px } .m-rozet { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-rozet); padding:7px 14px; font:500 13px/1 Poppins; color:var(--lacivert) } .m-uyari { margin-top:22px; background:#fff8e6; border:1px solid #f0dfae; border-radius:var(--r-kart); padding:16px 18px; font:400 13.5px/1.7 Poppins; color:#7a5a12 } .m-uyari b { color:#5c4209; font-weight:600 } /* ── mobil ── */ @media (max-width:1040px) { .m-moduller { grid-template-columns:1fr 1fr } } @media (max-width:860px) { .m-moduller, .m-ayirt { grid-template-columns:1fr } .m-akis { padding:20px 18px } } /* ── karşılaştırma tablosu ── */ .m-kiyas-sar { background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); overflow:hidden; box-shadow:var(--golge-1) } .m-kiyas { width:100%; border-collapse:collapse; font:400 14px/1.55 Poppins } .m-kiyas th { font:600 12px/1 Poppins; text-transform:uppercase; letter-spacing:.4px; color:var(--soluk); padding:16px 18px; text-align:left; background:var(--zemin); border-bottom:1px solid var(--cizgi) } .m-kiyas th.biz { color:var(--urun) } .m-kiyas td { padding:14px 18px; border-bottom:1px solid var(--cizgi); color:var(--metin) } .m-kiyas tr:last-child td { border-bottom:0 } .m-kiyas td:first-child { color:var(--lacivert); font-weight:500 } .m-kiyas td.yok { color:var(--soluk) } .m-kiyas td.var { color:var(--lacivert); font-weight:500; background:#f4faf7 } .m-kiyas td.var::before { content:'✓'; color:var(--urun); font-weight:700; margin-right:8px } .m-kiyas-not { margin-top:14px; font:400 12.5px/1.6 Poppins; color:var(--soluk); text-align:center } /* ── kimin için ── */ .m-kimin { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } /* ── yakında rozeti — tek yerde ── */ .yakinda { display:inline-flex; align-items:center; background:#fff8e6; border:1px solid #f0dfae; color:#7a5a12; border-radius:var(--r-rozet); padding:3px 9px; font:600 10.5px/1.3 Poppins; letter-spacing:.3px; white-space:nowrap } .m-ozellik .bas { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px } .m-ozellik .bas b { margin:0 } .m-rozet.pasif { color:var(--soluk); background:var(--zemin) } @media (max-width:860px) { .m-kimin { grid-template-columns:1fr } .m-kiyas { font-size:13px } .m-kiyas th, .m-kiyas td { padding:11px 12px } .m-kiyas th:first-child, .m-kiyas td:first-child { position:sticky; left:0; background:#fff } .m-kiyas-sar { overflow-x:auto } } /* ══════════════════ MEGA MENÜ ══════════════════ İKİ KADEMELİ: solda ürün rayı, sağda seçilen ürünün özellikleri. Tek kademede sütunlar dengesizdi (ön muhasebe 22, Amazon 7 özellik). Menünün kendisi sticky olduğu için panel altına, tam genişlikte oturur. */ .menu { position:sticky; top:0; z-index:40 } .mega-ac { display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:var(--lacivert); opacity:.76; padding:27px 0; font:500 14.5px/1 Poppins; border-bottom:2px solid transparent } .mega-ac:hover, .menu.mega-acik .mega-ac { opacity:1; border-bottom-color:var(--lacivert-600) } .mega-ac svg { transition:transform .18s cubic-bezier(.23,1,.32,1) } .menu.mega-acik .mega-ac svg { transform:rotate(180deg) } .mega { position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--cizgi); box-shadow:0 18px 40px rgba(5,44,101,.10) } .mega[hidden] { display:none } /* .kap sınıfı KULLANILMIYOR: ".menu .kap" kuralı display:flex ve height:74px dayatıp paneli içeriğine sığmaz hâle getiriyordu. */ /* Panel, ekran yüksekliğini aşmasın: ön muhasebede 63 modül var ve panel 974px'e çıkmıştı — 900px'lik dizüstünde alt yarısı görünmüyordu (ölçüldü 2026-09-27). Taşarsa panel kendi içinde kayar. */ /* Panel sayfa kabıyla (1240px) aynı genişlikteydi ve ön muhasebenin 62 maddesi dar dört sütuna sıkışıyordu; sağda geniş boşluk kalıyordu (kullanıcı düzeltmesi 2026-09-28). Menü tam genişlikte açıldığı için kap genişliğine bağlı kalmasının bir sebebi yok. */ .mega-ic { max-width:min(1560px, calc(100vw - 40px)); margin:0 auto; padding:0 32px; display:grid; grid-template-columns:minmax(0,272px) minmax(0,1fr); gap:0; max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin } /* ── sol ray ── */ .mega-ray { padding:24px 24px 26px 0; border-right:1px solid var(--cizgi); display:flex; flex-direction:column; gap:4px; align-items:stretch } .mega-ruy { display:grid; grid-template-columns:10px minmax(0,1fr) 14px; gap:11px; align-items:start; text-align:left; width:100%; background:none; border:0; cursor:pointer; border-radius:10px; padding:11px 12px; transition:background .14s ease-out } .mega-ruy:hover, .mega-ruy[aria-selected="true"] { background:var(--zemin) } .mega-nokta { width:10px; height:10px; border-radius:50%; background:var(--mu); margin-top:5px } .mega-ruy b { display:block; font:600 14.5px/1.3 Poppins; color:var(--lacivert) } .mega-ruy[aria-selected="true"] b { color:var(--mu) } .mega-alt { display:block; font:400 12px/1.45 Poppins; color:var(--soluk); margin-top:3px } .mega-ok { color:var(--soluk); margin-top:6px; opacity:0; transition:opacity .14s ease-out } .mega-ruy[aria-selected="true"] .mega-ok { opacity:1; color:var(--mu) } /* Ücretsiz araçlar: rayın altında, ayrı bir blok. Ürün rayıyla karışmasın diye üstten çizgiyle ayrıldı ve madde değil KART gibi duruyor — ziyaretçinin üye olmadan deneyebileceği tek yer burası (kullanıcı notu 2026-09-25). */ .mega-ek { margin-top:26px; padding-top:18px; border-top:1px solid var(--cizgi) } .mega-duz { list-style:none; margin:0; padding:0; display:grid; gap:4px } .mega-duz a { display:grid; grid-template-columns:32px minmax(0,1fr); gap:11px; align-items:center; padding:9px 12px; margin-left:-12px; border-radius:10px; transition:background .14s ease-out } .mega-duz a:hover { background:var(--zemin) } .mega-duzik { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--zemin); color:var(--lacivert-600); transition:background .14s ease-out, color .14s ease-out } .mega-duzik svg { width:17px; height:17px; display:block } .mega-duz a:hover .mega-duzik { background:var(--lacivert); color:#fff } .mega-duzmetin b { display:block; font:600 13.5px/1.35 Poppins; color:var(--lacivert) } .mega-duzmetin span { display:block; font:400 11.5px/1.45 Poppins; color:var(--soluk); margin-top:2px } /* ── sağ panel ── */ .mega-panel { padding:24px 0 26px 28px } .mega-oz[hidden] { display:none } .mega-panelbas { margin-bottom:16px } .mega-panelbas a { display:inline-flex; align-items:center; gap:7px; font:600 13px/1 Poppins; color:var(--mu) } .mega-panelbas a:hover { text-decoration:underline } /* Sütun sayısı ürünün grup sayısına göre (--sut): ön muhasebede 7 grup var, üç sütunda liste çok uzuyordu; kârlılık ve Amazon'da 3 grup, dört sütun boşluk bırakıyordu. */ /* Sütun sayısı hem ÜRÜNE hem EKRANA bağlı. Ön muhasebede 9 grup var; 1280px'te beş sütun 158px'e düşüyordu ve en uzun etiket 151px (kullanıcı düzeltmesi 2026-09-28). repeat() içinde min() çalışmadığı için üç ayrı değişken inline yazılıyor. */ /* IZGARA DEĞİL SÜTUN AKIŞI: ızgarada satır yüksekliğini en uzun grup belirliyordu (Finans 11 madde) ve kısa grupların altında koca boşluk kalıyordu (kullanıcı düzeltmesi 2026-09-28). Sütun akışında gruplar birbirinin altına yapışık iniyor. */ .mega-gruplar { column-count:var(--s5,3); column-gap:22px } .mega-grup { break-inside:avoid; margin-bottom:24px } .mega-grup:last-child { margin-bottom:0 } @media (max-width:1400px) { .mega-gruplar { column-count:var(--s4,3) } } /* Grup başlığı ÜRÜN RENGİNDE: gri olunca üç ürünün paneli birbirinden ayırt edilmiyordu (kullanıcı kararı 2026-09-28). --mu her panelde ürünün rengini taşıyor: ön muhasebe yeşil, kârlılık lacivert, Amazon turuncu. */ .mega-gbas { font:700 13px/1 Poppins; letter-spacing:.5px; text-transform:uppercase; color:var(--mu, var(--soluk)); margin-bottom:11px } .mega-grup ul { list-style:none; margin:0; padding:0; display:grid; gap:1px } .mega-grup li a { display:block; padding:5px 8px; margin-left:-8px; border-radius:7px; font:400 13.5px/1.5 Poppins; color:var(--metin); transition:background .14s ease-out, color .14s ease-out } .mega-grup li a:hover { background:var(--zemin); color:var(--mu) } /* Henüz açılmamış modül: menüde duruyor ama söz verilmiş gibi görünmesin. Rozet etiketin YANINA değil ALTINA konuyor: dört sütunlu panelde sütun 187px, en uzun etiket 151px — yan yana hiçbir okunur rozet sığmıyor (ölçüldü 2026-09-25). Alt satır bilinçli bir seçim, taşma değil. */ .mega-yakinda { display:block; width:max-content; margin-top:3px; padding:2px 6px; border-radius:4px; background:var(--zemin); border:1px solid var(--cizgi); color:var(--soluk); font:600 9.5px/1.2 Poppins; letter-spacing:.3px; text-transform:uppercase; font-style:normal } .mega-grup li a:hover .mega-yakinda { background:#fff } .mega-ekbas { font:600 11.5px/1 Poppins; letter-spacing:.4px; text-transform:uppercase; color:var(--soluk); margin-bottom:10px } @media (max-width:1040px) { .mega-gruplar { column-count:var(--s2,2) } .mega-ic { grid-template-columns:minmax(0,250px) minmax(0,1fr) } } @media (max-width:900px) { /* PANEL BAŞLIĞIN ALTINDAN AÇILIR, EKRANIN ALTINDAN DEĞİL (2026-10-28). Önce alt sayfa (bottom sheet) kalıbındaydı: `position:fixed; bottom:0`. Ölçüldü — başlık 113 px'te bitiyor, panel 238 px'te başlıyordu ve arada 125 px'lik bir boşluktan sayfa görünüyordu. Kullanıcı bunu "boşluk oluyor, aşağıdan açılıyor" diye bildirdi. İki şey birlikte bozuyordu: alt sayfanın PERDESİ yok (arkası karartılmıyor), üstelik "Ürünler"e basınca çekmece kapanıyor (`nav` display:none) — yani panelin bağlı olduğu şey ekranda kalmıyor, panel havada duruyor gibi görünüyordu. Perde eklemek yerine panel masaüstündeki yerine çekildi: `.menu` zaten `position:sticky`, yani `top:100%` başlığın tam altı. Aynı bileşenin iki ekranda iki ayrı etkileşim kalıbı olmasın. */ .mega-ac { padding:10px 0; white-space:nowrap } .mega { position:absolute; left:0; right:0; top:100%; bottom:auto; max-height:74vh; max-height:74dvh; overflow-y:auto; border-radius:0 0 16px 16px; box-shadow:0 18px 40px rgba(5,44,101,.16) } .mega-ic { grid-template-columns:1fr; padding:0 20px } .mega-ray { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--cizgi); padding:14px 0; gap:8px; scrollbar-width:none } .mega-ray::-webkit-scrollbar { display:none } /* Kesik sekme solar — şerit ve tur çerçevesiyle aynı kalıp. Varsayılan maske yok: sınıfları Menu.astro'nun script'i koyuyor. */ .mega-ray.solda-var, .mega-ray.sagda-var { -webkit-mask-image:linear-gradient(90deg,var(--sol,#000) 0,#000 22px, #000 calc(100% - 22px),var(--sag,#000) 100%); mask-image:linear-gradient(90deg,var(--sol,#000) 0,#000 22px, #000 calc(100% - 22px),var(--sag,#000) 100%) } .mega-ray.solda-var { --sol:transparent } .mega-ray.sagda-var { --sag:transparent } .mega-ruy { grid-template-columns:10px minmax(0,1fr); width:auto; flex:none; white-space:nowrap; padding:9px 12px } .mega-ruy .mega-alt, .mega-ok { display:none } .mega-ray .mega-ek { display:none } .mega-panel { padding:18px 0 22px } .mega-gruplar { column-count:1 } } /* ── Blog yazısı içindeki stok fotoğraf ── Unsplash'ten hotlink ediliyor (API kuralı: kopyalama yok). Künye de API kuralı — lisans atıf istemiyor ama API şartları istiyor. Yer: kısa cevabın ALTINDA. Cevap-önce yapısı bozulmasın diye yukarı alınmadı; yapay zekâ motorları ilk paragrafı alıntılıyor. */ .yazi-foto { margin:26px 0 30px } .yazi-foto img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-kart) } .yazi-foto figcaption { margin-top:9px; font:400 12.5px/1.5 Poppins; color:var(--soluk) } .yazi-foto figcaption a { color:var(--soluk); text-decoration:underline; text-underline-offset:2px } .yazi-foto figcaption a:hover { color:var(--lacivert) } /* Modül haritasında henüz açılmamış modül. Menüdeki rozetin eşi; harita ile menü aynı şeyi söylemek zorunda (2026-09-27). */ .m-yakinda { display:inline-block; margin-left:7px; vertical-align:1px; padding:2px 6px; border-radius:4px; background:#fff7e8; border:1px solid #f0dcb4; color:#9a6b12; font:600 9.5px/1.2 Poppins; letter-spacing:.3px; text-transform:uppercase; font-style:normal } /* Tur sekmesinde henüz açılmamış modül (ör. banka entegrasyonu). */ .k-yakinda { display:inline-block; margin-left:7px; padding:2px 6px; border-radius:4px; background:#fff7e8; border:1px solid #f0dcb4; color:#9a6b12; font:600 9px/1.2 Poppins; letter-spacing:.3px; text-transform:uppercase; font-style:normal; vertical-align:1px } /* Tur rayındaki grup başlığı. Ön muhasebede 35 ekran var; başlıksız düz liste hâlinde nerede olunduğu belli olmuyordu (kullanıcı kararı 2026-09-27: "gruplu olsun"). Kârlılıkta grup yok, başlık da basılmaz. */ .k-grup { padding:13px 10px 5px; font:600 9.5px/1 Poppins; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.42) } .k-grup:first-of-type { padding-top:4px } @media (max-width:900px) { /* Yatay rayda başlık satırı bozardı; gizleniyor. */ .k-grup { display:none } } /* ══════════════════ ÖZELLİK SAYFASI ══════════════════ /ozellikler/karlilik/ — mega menüdeki her maddenin kendi sayfası. Sınıflar oz- önekli. Kurgu: solda yapışkan özellik rayı, sağda yazı. Ray DOM'da gövdeden SONRA duruyor (dar ekranda 18 bağlantı yazının önüne geçmesin); masaüstünde ızgarayla sola alınıyor. Ön muhasebe özellik sayfalarının tasarımı değişebilir; o yüzden burada kârlılığa özel duruyor. */ .oz-sayfa { padding:34px 0 72px; background:#fff } /* Ortak .kap 1240px; burada 1100 — ray + 760px'lik yazı sütunu 1240'a yayılınca sayfa sola yaslanmış görünüyordu. */ .oz-sayfa .kap { max-width:1100px; display:grid; grid-template-columns:230px minmax(0,1fr); gap:52px; align-items:start } /* Pazaryeri sayfalarında başlığın üstündeki logo rozeti. Bu beş sayfanın ekran görüntüsü yok; marka işareti sayfayı tanınır kılıyor. */ .oz-pz { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-rozet); padding:7px 16px 7px 12px; box-shadow:var(--golge-1); margin-bottom:16px } .oz-pz img { height:18px; width:auto; max-width:74px; object-fit:contain; display:block } .oz-pz span { font:600 13px/1 Poppins; color:var(--lacivert) } .oz-govde { grid-column:2; grid-row:1; min-width:0; max-width:760px } .oz-ray { grid-column:1; grid-row:1; position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--cizgi) transparent } .oz-ray::-webkit-scrollbar { width:6px } .oz-ray::-webkit-scrollbar-thumb { background:var(--cizgi); border-radius:4px } .oz-ust { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; border-radius:10px; background:var(--zemin); border:1px solid var(--cizgi); font:600 13.5px/1.3 Poppins; color:var(--urun); margin-bottom:18px; transition:border-color .16s ease-out } .oz-ust:hover { border-color:var(--urun) } .oz-ust span { color:var(--soluk) } .oz-rgrup + .oz-rgrup { margin-top:18px } .oz-rbas { font:700 11px/1 Poppins; letter-spacing:.5px; text-transform:uppercase; color:var(--urun); margin-bottom:9px } .oz-ray ul { list-style:none; display:grid; gap:1px } .oz-ray li a { display:block; padding:6px 10px; border-radius:7px; font:400 13.5px/1.45 Poppins; color:var(--metin); border-left:2px solid transparent; transition:background .14s ease-out, color .14s ease-out } .oz-ray li a:hover { background:var(--zemin); color:var(--lacivert) } .oz-ray li a[aria-current="page"] { background:color-mix(in srgb, var(--urun) 8%, #fff); border-left-color:var(--urun); color:var(--urun); font-weight:600 } .oz-ray li em { display:inline-block; margin-left:6px; padding:1px 5px; border-radius:4px; background:#fff7e8; border:1px solid #f0dcb4; color:#9a6b12; font:600 8.5px/1.3 Poppins; letter-spacing:.3px; text-transform:uppercase; font-style:normal; vertical-align:1px } /* ── başlık bloğu ── */ .oz-govde h1 { font:700 34px/1.22 Poppins; color:var(--lacivert); letter-spacing:-.5px; margin-bottom:20px } .oz-yakinda { background:#fff7e8; border:1px solid #f0dcb4; border-radius:10px; padding:12px 16px; font:400 14.5px/1.6 Poppins; color:#7a5510; margin-bottom:18px } .oz-yakinda b { color:#6b4a0d } .oz-govde .kisa-cevap { border-left-color:var(--urun); margin-bottom:22px } .oz-cta { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:34px } .oz-cta a { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-dugme); padding:13px 22px; font:600 14.5px/1 Poppins; transition:transform .16s cubic-bezier(.23,1,.32,1) } .oz-cta a:active { transform:scale(.975) } .oz-cta .oz-dolu { background:var(--urun); color:#fff; box-shadow:0 6px 18px color-mix(in srgb, var(--urun) 28%, transparent) } .oz-cta .oz-bos { background:#fff; color:var(--lacivert); border:1.5px solid var(--cizgi) } /* ── ekran görüntüsü ── */ /* Panel görselleri yatay; dar sütunda kırpılmasın diye kendi içinde kayar. */ .oz-gorsel { margin:0 0 38px } .oz-gorsel .oz-kaydir { overflow-x:auto; -webkit-overflow-scrolling:touch } .oz-gorsel img { display:block; width:100%; min-width:520px; height:auto } .oz-gorsel figcaption { margin-top:11px; font:400 13px/1.65 Poppins; color:var(--soluk) } /* ── metin blokları ── */ .oz-blok { margin-bottom:38px } .oz-blok h2 { font:600 24px/1.32 Poppins; color:var(--lacivert); letter-spacing:-.3px; margin-bottom:14px } .oz-blok p { font:400 16px/1.78 Poppins; color:var(--metin) } .oz-blok p + p { margin-top:14px } /* ── nasıl çalışır ── */ .oz-adimlar { list-style:none; display:grid; gap:14px; counter-reset:oz } .oz-adimlar li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:18px 20px; box-shadow:var(--golge-1) } .oz-no { width:28px; height:28px; border-radius:9px; background:var(--urun); color:#fff; display:grid; place-items:center; font:700 13px/1 Poppins } .oz-adimlar b { display:block; font:600 15.5px/1.4 Poppins; color:var(--lacivert); margin-bottom:5px } .oz-adimlar p { font:400 14.5px/1.7 Poppins; color:var(--metin) } /* ── ayrıntı satırları ── */ .oz-ayrinti { display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr); border:1px solid var(--cizgi); border-radius:var(--r-kart); overflow:hidden } .oz-ayrinti dt { padding:13px 18px; background:var(--zemin); font:600 14px/1.55 Poppins; color:var(--lacivert); border-bottom:1px solid var(--cizgi) } .oz-ayrinti dd { padding:13px 18px; font:400 14.5px/1.65 Poppins; color:var(--metin); border-bottom:1px solid var(--cizgi) } .oz-ayrinti dt:last-of-type, .oz-ayrinti dd:last-of-type { border-bottom:0 } /* ── Marka listesi (entegrasyonlar) ── Paragraf hâlinde virgülle dizilen 28 marka okunmuyordu (kullanıcı notu 2026-10-03). Izgara, markayı taranabilir kılıyor; beta rozeti markanın yanında duruyor ki liste ikiye bölünmesin. */ .oz-marka { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px 14px } .oz-marka li { display:flex; align-items:center; gap:7px; padding:8px 0; font:500 14.5px/1.4 Poppins; color:var(--metin); border-bottom:1px solid var(--cizgi) } .oz-mgrup { margin-top:22px } .oz-mgrup:first-of-type { margin-top:10px } .oz-mgrup > h3 { font:600 14px/1.4 Poppins; color:var(--lacivert); letter-spacing:.2px; margin-bottom:4px } .oz-beta { padding:2px 6px; border-radius:4px; background:var(--zemin); border:1px solid var(--cizgi); color:var(--soluk); font:600 9.5px/1.2 Poppins; letter-spacing:.3px; text-transform:uppercase } /* "yakında": kodu hazır ama karşı taraf onayı/sözleşmesi bekleyen kalem. Beta'dan farklı — beta bağlantı kurulu ama saha doğrulaması bitmemiş, yakında henüz açık değil. Rengi de ayrı olsun ki karışmasın. */ .oz-beta.oz-yakin { background:#fff8e6; border-color:#f0dfae; color:#7a5a12 } .oz-mnot { margin-top:16px; font:400 14px/1.7 Poppins; color:var(--soluk) } /* ── SSS: blogdaki .yazi-sss kalıbı, üstteki boşluk daha dar ── */ .oz-sss { margin-top:0; margin-bottom:38px } /* ── ilgili özellikler ── */ .oz-ilgili { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px } .oz-ilgili a { display:block; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:17px 18px; transition:border-color .16s ease-out, transform .16s cubic-bezier(.23,1,.32,1) } .oz-ilgili a:hover { border-color:var(--urun) } .oz-ilgili a:active { transform:scale(.99) } .oz-ilgili span { font:600 10px/1 Poppins; letter-spacing:.4px; text-transform:uppercase; color:var(--soluk) } .oz-ilgili b { display:block; margin:9px 0 6px; font:600 15px/1.4 Poppins; color:var(--urun) } .oz-ilgili p { font:400 13px/1.6 Poppins; color:var(--metin) } /* ── blog bağlantıları ── */ .oz-yazilar ul { list-style:none; display:grid; gap:9px } .oz-yazilar li a { display:block; padding:13px 16px; border-radius:10px; background:var(--zemin); border:1px solid var(--cizgi); font:500 14.5px/1.55 Poppins; color:var(--lacivert); transition:border-color .16s ease-out } .oz-yazilar li a:hover { border-color:var(--urun) } /* ── dar ekran ── */ @media (max-width:1040px) { .oz-sayfa .kap { grid-template-columns:minmax(0,1fr); gap:0 } .oz-govde { grid-column:1; grid-row:1; max-width:none } /* Ray yazının ALTINA iner ve yapışkanlığı bırakır: dar ekranda sayfanın sonundaki "başka neler var" listesi olarak okunur. */ .oz-ray { grid-column:1; grid-row:2; position:static; max-height:none; margin-top:10px; padding-top:28px; border-top:2px solid var(--cizgi) } .oz-ray nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; align-items:start } /* Masaüstünde sıkı duran ray, dokunmatikte listeye dönüşüyor: satır yüksekliği parmak hedefine çıkarılır (mobil denetimi bunu ölçüyor). */ .oz-ray li a { padding:11px 10px; font-size:14.5px } .oz-ust { grid-column:1 / -1 } .oz-ilgili { grid-template-columns:minmax(0,1fr) } } @media (max-width:760px) { .oz-sayfa { padding:26px 0 54px } .oz-govde h1 { font-size:27px } .oz-blok h2 { font-size:21px } .oz-cta { flex-direction:column; align-items:stretch } .oz-ayrinti { grid-template-columns:minmax(0,1fr) } .oz-ayrinti dt { border-bottom:0; padding-bottom:0; background:#fff } .oz-ayrinti dd { padding-top:5px } .oz-ray nav { grid-template-columns:minmax(0,1fr) } .oz-gorsel img { min-width:0 } /* ÖZELLİK SAYFASINDAKİ PANEL ÇİZİMİ (2026-10-27, telefonda ölçüldü). Buradaki görsel iki türlü olabiliyor: gerçek EKRAN GÖRÜNTÜSÜ (`img`, kârlılık ürünü) ya da CSS ÇİZİMİ (`.k-pencere > .pz`, Amazon ve ön muhasebe — 2026-10-04 kararı). Yalnız birincisi için kural vardı: `.oz-kaydir` sarmalıyor, `img` küçülüyordu. Çizim DOM olduğu için küçülmüyor, eziliyor: 390 px'te tablo başlıkları ve rakamlar üst üste biniyordu. Ölçümde `figure.oz-gorsel > div.k-pencere > div.pz` zincirinde hiçbir ata yatay kaydırmıyordu. Tur bölümündeki (`.k-kaydir`) desenin aynısı: çizim doğal genişlikte kalır, ÇERÇEVE kaydırır. Sayfanın kendisi kaymaz. */ .oz-gorsel .k-pencere { overflow-x:auto; -webkit-overflow-scrolling:touch } .oz-gorsel .k-pencere > .pz { min-width:760px } } /* Satışta olmayan ürün — mega menüdeki rozet ve panel notu. Kullanıcı kararı 2026-09-28: bugün yalnız kârlılık satılıyor; diğer iki ürünün sayfası yayında kalıyor ama alınabilir gibi durmuyor. */ .mega-yakinda { display:inline-block; margin-left:7px; padding:2px 6px; border-radius:4px; background:#fff7e8; border:1px solid #f0dcb4; color:#9a6b12; font:600 9px/1.2 Poppins; letter-spacing:.3px; text-transform:uppercase; font-style:normal; vertical-align:1px } .mega-panelnot { display:inline-block; margin-right:14px; padding:4px 10px; border-radius:6px; background:#fff7e8; border:1px solid #f0dcb4; color:#7a5510; font:600 11.5px/1 Poppins } /* Satışta olmayan ürünün hero bandı (ön muhasebe, Amazon — 2026-09-28). Kayıt düğmesinin yerinde duruyor; ziyaretçi ne alabileceğini yanlış anlamasın diye kayıt akışından ÖNCE okunuyor. */ .urun-yakinda { display:block; background:#fff7e8; border:1px solid #f0dcb4; border-radius:var(--r-kart); padding:14px 18px; margin:0 0 18px } .urun-yakinda b { display:block; font:600 15px/1.4 Poppins; color:#7a5510 } .urun-yakinda span { display:block; margin-top:5px; font:400 14px/1.65 Poppins; color:#8a6a2c } .urun-yakinda a { color:#6b4a0d; text-decoration:underline } /* Bandın BAŞLIĞI ve blok; gövdenin içindeki vurgu da ama satır başı yapmamalı. Kural olmadan İngilizce entegrasyon sayfasında "Per-order / profit analysis / covers..." diye üçe bölünüyordu. */ .urun-yakinda span b { display:inline; font:inherit; font-weight:600; color:#6b4a0d } /* Fiyat sayfasında satışta olmayan ürünün fiyat tablosunun yerine. */ .fyakinda { background:var(--zemin); border:1px dashed var(--cizgi); border-radius:var(--r-kart); padding:22px; text-align:center } .fyakinda b { display:block; font:600 16px/1.4 Poppins; color:var(--lacivert) } .fyakinda span { display:block; margin-top:6px; font:400 14px/1.65 Poppins; color:var(--soluk) } /* Ana sayfa fiyat kartında satışta olmayan ürün. */ .fkart-yakinda { background:#fff7e8; border:1px solid #f0dcb4; border-radius:10px; padding:12px 14px; margin:14px 0; font:500 13.5px/1.6 Poppins; color:#7a5510 } /* ── Entegrasyonlar sayfası ─────────────────────────────────────── Kart ızgarası; rozet entegrasyonun HANGİ ÜRÜNDE çalıştığını söyler. Rozetsiz liste "41 markanın hepsi her üründe var" diye okunuyordu. */ .ent-grup { margin-bottom: 44px } .ent-gbas { margin-bottom: 18px } .ent-gbas h2 { font: 600 20px/1.3 Poppins; color: var(--lacivert); margin: 0 } .ent-gbas h2 span { display: inline-block; margin-left: 8px; font: 500 12px/1 Poppins; color: var(--soluk); background: #eef1f7; border-radius: 10px; padding: 5px 9px; vertical-align: middle } .ent-gbas p { margin: 7px 0 0; max-width: 62ch; font: 400 14px/1.6 Poppins; color: var(--soluk) } .ent-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px } .ent-kart { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; background: #fff; border: 1px solid #e4e9f2; border-radius: 12px; padding: 14px } .ent-kart img { grid-row: 1 / 3; width: 40px; height: 40px; object-fit: contain; border-radius: 8px } .ent-kart b { font: 600 14px/1.3 Poppins; color: var(--lacivert); align-self: end } .ent-rozetler { display: flex; flex-wrap: wrap; gap: 4px; align-self: start } .ent-r { font: 500 10px/1 Poppins; font-style: normal; border-radius: 5px; padding: 4px 6px; white-space: nowrap } .ent-r.r-muhasebe { background: #e8f5ee; color: #0a6e3f } .ent-r.r-karlilik { background: #e7eefc; color: #1d4ed8 } .ent-r.r-amazon { background: #fdf0e7; color: #b4531a } .ent-not { max-width: 70ch; font: 400 13.5px/1.65 Poppins; color: var(--soluk); border-left: 3px solid #e4e9f2; padding-left: 14px; margin: 0 } @media (max-width: 520px) { .ent-liste { grid-template-columns: 1fr 1fr } .ent-kart { grid-template-columns: 32px 1fr; padding: 11px } .ent-kart img { width: 32px; height: 32px } } /* 400 px ALTINDA TEK SÜTUN (2026-10-27, 360 px'te ölçüldü). İki sütunda kart içeriğine ~110 px kalıyor ve ürün rozetleri (`.ent-r`) `white-space:nowrap` taşıyor — kırpılamıyorlar. Türkçede "Ön Muhasebe" sığıyordu, İNGİLİZCEDE "Pre-Accounting" sığmıyor: `/en/integrations` 360 px'te 15 öğeyle taşıyordu. Rozeti kısaltmak ya da sarmak yerine sütun sayısı düşürüldü — rozet zaten kartın taşıdığı asıl bilgi. */ @media (max-width: 400px) { .ent-liste { grid-template-columns: 1fr } } /* 340 px altında logo bir adım daha küçülür — kısayol ve hamburger aynı satırda kalsın diye (gerekçe menü bloğunda yazılı). KISAYOLUN İKONU DA DÜŞER (2026-10-28). Ad "Hesapla"dan "Komisyon Hesaplama"ya çıkınca düğme 103 → 109 px oldu ve 320 px'te satır 10 px açık verdi: hamburger alt satıra düştü, başlık 62'den 112 px'e çıktı — CLAUDE.md'de yazılı olan tam bu kusur, bu kez adın uzamasıyla geri geldi. İkon + boşluk 22 px, yani kaldırmak 12 px pay bırakıyor. Dolguyu daha da kısmak yerine ikon seçildi: 11 px'lik yazıyı kenara yapıştırmak okunurluğu bozuyordu, ikon ise kayıpsız — düğmenin ne yaptığını zaten metin söylüyor. */ /* İKON 355 px'TE DÜŞER, LOGO 340'TA — iki ayrı eşik, çünkü iki ayrı sıkışma. Ölçüm: ikonlu düğmeyle satır 295 px içerik istiyor (logo 118 + 10 + düğme 115 + 10 + hamburger 42) ve 355 px'in altında sığmıyor. Logonun küçülmesi ancak 340'ın altında gerekiyor. Tek eşikte birleştirmek, 341–355 bandında hamburger'i alt satıra düşürüyordu. */ @media (max-width:355px) { .menu-hesap { padding:5px 10px } .menu-hesap svg { display:none } } @media (max-width:340px) { .menu .marka img { width:104px } } /* ══════════════════ YAPIŞIK BAŞLIK ══════════════════ Üst şerit (ürünler arası geçiş) ve ana menü birlikte yapışır — kullanıcı isteği 2026-10-04: "bunların tamamı sabit olsun". NEDEN TEK KAPSAYICI: ikisine ayrı `position:sticky` verip menüye `top:46px` yazmak masaüstünde çalışıyor ama 1010px altında şerit satır kaydırıp yükseklik değiştiriyor; sabit 46px orada menüyü şeridin arkasında bırakıyordu. Kapsayıcı yapışınca yükseklik ne olursa olsun ikisi birlikte kalıyor. `.menu`'nün kendi sticky'si burada ARTIK İŞE YARAMIYOR ve iç içe yapışkan iki katman tarayıcıda oynamaya yol açıyordu — static'e alındı. */ .ust-yapisik { position: sticky; top: 0; z-index: 41 } .ust-yapisik .menu { position: static; top: auto } /* Çapaya giden başlık yapışık başlığın altında kalmasın. 120px = şerit 46 + menü 74; mobilde başlık daha kısa, fazlası zarar vermez. */ .cevap h2, .k-bbas h2 { scroll-margin-top: 138px } .oz-ray { top: 142px; max-height: calc(100vh - 166px) } @media (max-width: 1010px) { .oz-ray { top: auto; max-height: none } } /* ── İletişim sayfası ─────────────────────────────────────────── */ .ilet-kutular { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:26px } .ilet-kart { background:#fff; border:1px solid var(--cizgi); border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start } .ilet-ust { font:600 11px/1 Poppins; letter-spacing:.09em; text-transform:uppercase; color:var(--soluk) } .ilet-posta { font:600 20px/1.3 Poppins; color:var(--lacivert); word-break:break-all } .ilet-posta:hover { color:var(--turuncu) } .ilet-kart p { margin:0; font:400 14px/1.65 Poppins; color:var(--soluk) } /* Adres bilgi, açıklama değil: soluk gri yerine metin rengiyle duruyor. */ .ilet-kart p.ilet-adres { font:500 15px/1.7 Poppins; color:var(--metin) } .ilet-kart .oz-cta { margin:4px 0 0 } /* İletişim sayfası düzeni: solda form, sağda e-posta ve destek notu. Form daha geniş — sayfanın işi o, kartlar yardımcı bilgi. */ .ilet-duzen { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start } .ilet-formkutu { background:#fff; border:1px solid var(--cizgi); border-radius:14px; padding:24px } .ilet-giris { margin:8px 0 18px; font:400 14.5px/1.7 Poppins; color:var(--soluk) } .ilet-giris b { font-weight:600; color:var(--lacivert) } .ilet-yan { display:flex; flex-direction:column; gap:16px } .ilet-kart b { font-weight:600; color:var(--lacivert) } @media (max-width:860px) { .ilet-duzen { grid-template-columns:minmax(0,1fr) } } /* ── Form (iletişim + "haber ver") ─────────────────────────────── İkisi de aynı bileşenden basılır: src/components/IletisimFormu.astro */ .ilet-form { display:flex; flex-direction:column; gap:14px } /* Üçlü satır: ad · e-posta · telefon. "Haber ver"de alan sayısı aynı, o yüzden ayrı bir ızgara gerekmiyor. */ .if-satir { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px } .ilet-form label { display:flex; flex-direction:column; gap:6px; min-width:0 } .ilet-form label > span { font:600 12.5px/1.3 Poppins; color:var(--lacivert) } /* Zorunluluk yıldızı — rengi tek başına anlam taşımaz, yanında "*" var. */ .ilet-form label > span i { font-style:normal; color:var(--turuncu) } .ilet-form label > span .if-ops { margin-left:4px; font-weight:400; font-size:11.5px; color:var(--soluk) } .ilet-form input, .ilet-form textarea { width:100%; box-sizing:border-box; background:#fff; border:1.5px solid var(--cizgi); border-radius:var(--r-dugme); padding:11px 13px; font:400 14.5px/1.5 Poppins; color:var(--metin); transition:border-color .16s ease, box-shadow .16s ease } .ilet-form textarea { resize:vertical; min-height:120px } .ilet-form input:focus-visible, .ilet-form textarea:focus-visible { outline:none; border-color:var(--lacivert); box-shadow:0 0 0 3px rgba(5,44,101,.10) } .ilet-form input:disabled, .ilet-form textarea:disabled { background:var(--zemin); color:var(--soluk) } /* iOS SAFARI ODAKTA SAYFAYI BÜYÜTÜYOR (2026-10-27, telefonda ölçüldü). Kural Safari'nin kendisinde: font-size'ı 16 px'in ALTINDA olan bir form alanına basıldığında sayfa otomatik yakınlaşıyor — ve geri çıkmıyor. Ziyaretçi adını yazmaya başladığı anda site iki katına çıkıp yana kayıyor, kalan alanları görmek için elle uzaklaştırması gerekiyor. Alanlar 14,5 px'ti; mobilde 16'ya çıkarıldı. Masaüstünde 14,5 kalıyor — orada böyle bir davranış yok ve form kutusu 16 px'le şişiyor. `maximum-scale=1` İLE ÇÖZÜLMEZ: o da zoom'u kapatır ama GÖRME ENGELLİ kullanıcının sayfayı büyütmesini de engeller. Erişilebilirliği kırmadan çözmenin tek yolu alanın kendi punto'sunu büyütmek. */ @media (max-width:760px) { .ilet-form input, .ilet-form textarea { font-size:16px } } /* BAL KÜPÜ: `display:none` DEĞİL — bazı botlar görünmeyen alanı atlıyor. Ekrandan çıkarılır ama DOM'da gerçek bir alan olarak durur; ekran okuyucudan `aria-hidden`, klavyeden `tabindex="-1"` ile saklı. */ .if-balkupu { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } .if-alt { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:2px } /* .oz-dolu yalnız .oz-cta içinde boyanıyor; buradaki düğme kendi kuralını taşır. */ .if-alt button.oz-dolu { display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer; background:var(--vurgu); color:#fff; border-radius:var(--r-dugme); padding:14px 28px; font:600 15px/1 Poppins; transition:transform .16s cubic-bezier(.23,1,.32,1), opacity .16s ease } .if-alt button.oz-dolu:active { transform:scale(.975) } /* Jeton gelene kadar kapalı: jetonsuz gönderi sunucuda sessizce düşüyor. */ .if-alt button.oz-dolu:disabled { opacity:.5; cursor:progress; transform:none } .if-kvkk { margin:0; font:400 12.5px/1.6 Poppins; color:var(--soluk) } .if-kvkk a { color:var(--lacivert); text-decoration:underline } .if-hata { margin:0; background:#fdeeee; border:1px solid #f3cfcf; border-radius:10px; padding:11px 14px; font:500 13.5px/1.6 Poppins; color:#8d2b2b } .if-hata a { color:#6f1f1f; text-decoration:underline } /* reCAPTCHA KUTUSU 304px SABİT — küçültülemez, Google'ın iframe'i. Telefonda kullanılabilir genişlik bunun altına düşüyor (390px ekranda .kap 32+32, kart 24+24 payla ~278px kalıyor), o yüzden ölçekleniyor. `transform` yerleşim kutusunu KÜÇÜLTMEZ: 304px yer kaplamaya devam eder, eksi sağ boşluk o farkı geri alır — yoksa kutu yine taşardı. Oranlar: fark = 304 × (1 − ölçek). */ @media (max-width:620px) { .ilet-formkutu, .hv-kutu { padding:18px } .if-alt .g-recaptcha { transform:scale(.92); transform-origin:0 50%; margin-right:-24px } } @media (max-width:400px) { .if-alt .g-recaptcha { transform:scale(.84); margin-right:-49px } } @media (max-width:340px) { .if-alt .g-recaptcha { transform:scale(.74); margin-right:-79px } } /* ── "Satışa çıkınca haber ver" bandı ──────────────────────────── Satışta olmayan ürün sayfalarının sonunda; bkz. HaberVer.astro */ .hv-kutu { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r-kart); padding:30px } .hv-yazi h2 { font:700 clamp(21px,2.4vw,27px)/1.3 Poppins; color:var(--lacivert); margin:0 0 10px } .hv-yazi p { margin:0 0 14px; font:400 15px/1.75 Poppins; color:var(--metin) } .hv-liste { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px } .hv-liste li { position:relative; padding-left:20px; font:400 14px/1.65 Poppins; color:var(--soluk) } .hv-liste li::before { content:''; position:absolute; left:4px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--vurgu) } .hv-liste a { color:var(--vurgu-koyu); text-decoration:underline } @media (max-width:860px) { .hv-kutu { grid-template-columns:minmax(0,1fr); padding:24px } } /* ── Hukuki metin sayfaları (KVKK vb.) ─────────────────────────── Uzun düz metin: satır uzunluğu okunabilir bantta tutulur. */ .hukuk { max-width:74ch } .hukuk-blok { margin-bottom:34px } .hukuk h1 { font:700 clamp(24px,3.2vw,32px)/1.25 Poppins; color:var(--lacivert); margin:0 0 14px } .hukuk h2 { font:600 18px/1.35 Poppins; color:var(--lacivert); margin:0 0 12px } .hukuk p { font:400 15px/1.75 Poppins; color:var(--metin); margin:0 0 12px } .hukuk ul { margin:0 0 12px; padding-left:20px } .hukuk li { font:400 15px/1.75 Poppins; color:var(--metin); margin-bottom:6px } .hukuk strong { color:var(--lacivert); font-weight:600 } /* ESAS METİN KLOZU — yalnız İngilizce hukuk sayfalarında (`uyari: true`). Kutu, çünkü ziyaretçi hangi sürümün bağlayıcı olduğunu metnin içinde arayarak bulmamalı. Başlığı ,

değil: kloz belgenin bir maddesi değil, belge hakkında bir not — başlık hiyerarşisine girmemeli. */ .hukuk-uyari { margin:0 0 30px; padding:14px 16px; border-radius:10px; border:1px solid var(--cizgi); border-left:3px solid var(--turuncu); background:var(--zemin) } .hukuk-uyari b { display:block; margin-bottom:6px; font:600 14px/1.4 Poppins; color:var(--lacivert) } .hukuk-uyari p { margin:0; font:400 14px/1.7 Poppins } .hukuk-uyari p + p { margin-top:8px } /* Kendi sayfası olan entegrasyon kartı tıklanabilir görünür */ .ent-kart.bagli { transition:border-color .16s ease, box-shadow .16s ease } .ent-kart.bagli:hover { border-color:var(--turuncu); box-shadow:0 4px 14px rgba(5,44,101,.07) } .ent-ad { font:600 14px/1.3 Poppins; color:var(--lacivert); align-self:end } .ent-kart.bagli:hover .ent-ad { color:var(--turuncu) } /* Kartın tamamı tıklansın: bağlantıyı karta yay */ .ent-kart.bagli { position:relative } .ent-ad::after { content:''; position:absolute; inset:0 } /* Marka sayfası: tür + ürün rozetleri başlığın altında */ .ent-tur { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:400 14px/1.6 Poppins; color:var(--soluk) } /* ── Özellik listesi (/en) ─────────────────────────────────────── */ .oz-liste { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px } .oz-lgrup h3 { font:600 13px/1 Poppins; letter-spacing:.08em; text-transform:uppercase; color:var(--soluk); margin:0 0 12px } .oz-lgrup ul { list-style:none; margin:0; padding:0; display:grid; gap:2px } .oz-lgrup li a { display:block; padding:9px 11px; border-radius:9px } .oz-lgrup li a:hover { background:var(--zemin) } .oz-lgrup li b { display:block; font:600 14px/1.35 Poppins; color:var(--lacivert) } .oz-lgrup li span { display:block; margin-top:2px; font:400 12.5px/1.5 Poppins; color:var(--soluk) } /* Fiyatı yayımlanmış ama satışta olmayan ürünün tablo üstü şeridi (2026-10-27). `.fyakinda` kutusunun kendisi tablonun YERİNE basılıyordu; bu varyant tablonun ÜSTÜNE biniyor, o yüzden alt boşluk ve sol vurgu var. */ .fyakinda-serit { margin-bottom:16px; border-left:3px solid var(--urun); text-align:left; align-items:flex-start } /* Ana sayfa hero'sundaki demo bağlantısı (2026-10-27). Düğme değil: hero'da zaten iki düğme var ve mobilde dikey yığıldıkları için üçüncüsü ekranı kaplardı. `.cta` ile `.guven` arasında duruyor. */ .hero-demo { margin:-8px 0 14px; font:500 14px/1.6 Poppins } .hero-demo a { color:var(--lacivert); border-bottom:1px solid rgba(20,33,61,.25) } .hero-demo a:hover { border-bottom-color:currentColor } /* Kademe kartında rakamın hemen altındaki nitelik satırı ("yıllık ödemede · KDV dahil"). Detay satırından AYRI ve daha koyu: başlığı niteleyen şey o, alternatif tutarlar değil. */ .fpaket-nitelik { display:block; color:var(--metin); margin-top:8px } .fpaket-nitelik + small { margin-top:3px } /* Hero düğmeleri telefonda tam genişlik (2026-10-27). `.cta` yalnız `flex-wrap` kullanıyordu; iki düğmeyle sorun değildi ama Amazon demosu eklenince üç düğme 200/206/174 px ile farklı genişliklerde alt alta sarıyor ve dağınık duruyordu. `.k-cta` ve `.oz-cta` aynı genişlikte zaten bunu yapıyor — kural yeni değil, `.cta`ya da uygulandı. */ @media (max-width:760px) { .cta { flex-direction:column; align-items:stretch } .cta .dugme { width:100% } } /* ── MİKRO ETİKETLERİN TELEFONDA TABANI (2026-10-28, 24 sayfada ölçüldü) ── Sitede bir "mikro etiket" ailesi var: büyük harf, harf aralıklı, rozet ya da üst başlık. Masaüstünde 8,5 ile 11 px arasına dağılmışlar — orada sorun değil, çünkü yanlarındaki metin de küçük ve okuyan ekrana yakın değil. Telefonda ikisi de bozuluyor: büyük harf + harf aralığı zaten okumayı zorlaştırıyor, 8,5 px'te "yakında" rozeti seçilmiyor. Ailenin bir kısmı ZATEN 11 px (`.k-mb`, `.ilet-ust`, `.oz-rbas`), yani taban uydurulmadı — evin kendi ölçüsü. Altında kalanlar ona çekiliyor. Tek tek değil aile olarak yazılı olmasının sebebi: `.oz-ray li a` dar ekranda 13,5 → 14,5 px'e çıkarılmıştı (parmak hedefi), içindeki rozet 8,5 px'te unutulmuştu. Satır büyüyünce rozet göreli olarak daha da küçülmüş oldu. Aile tek yerde durursa yeni bir etiket eklendiğinde aynı şey tekrar edilmez. */ @media (max-width:760px) { .oz-ray li em, /* özellik rayındaki "yakında" 8,5 → 11 */ .m-yakinda, /* ön muhasebe özellik listesi 9,5 → 11 */ .dugme.pasif-dugme .yakinda, .fetiket, /* kademe kartındaki "popüler" 10 → 11 */ .ent-r, /* entegrasyon kartı ürün rozeti 10 → 11 */ .oz-ilgili span, /* ilgili özellik kartının üst adı 10 → 11 */ .secici button .mt small, /* hero ürün seçicisinin alt satırı 10,5 → 11 */ .k-yazi span, /* tur adımının üst başlığı 10,5 → 11 */ .yakinda { font-size:11px } }