:root{
  /* Marka turkuazı (#007A82) — 2026-09-07 rebrand (eski saks mavisi #0C7DF5). */
  --c1:#007A82; --c2:#00727A; --c3:#00565C; --soft:#e2f1f2;
  --ink:#101A28; --muted:#566476; --bg:#f4f7fb; --card:#ffffff; --line:#e7edf4;
  --sh:0 1px 2px rgba(16,26,40,.05), 0 6px 20px rgba(16,26,40,.06);
  --sh-lg:0 2px 6px rgba(16,26,40,.06), 0 18px 44px rgba(16,26,40,.12);
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--c2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- Hero ---------- */
header.hero{position:relative;overflow:hidden;color:#fff;padding:48px 0 40px;text-align:center;
  background:url("hero.jpg") center/cover no-repeat;background-color:#007A82}
/* Mavi filtre YOK — sadece metin okunsun diye çok hafif nötr koyulaşma (üst+alt) */
header.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,22,30,.42),rgba(6,22,30,.12) 45%,rgba(6,22,30,.38))}
header.hero .logo{filter:drop-shadow(0 2px 12px rgba(0,0,0,.32))}
header.hero p.tag{text-shadow:0 1px 10px rgba(0,0,0,.35)}
header.hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-text{display:flex;flex-direction:column;align-items:center;width:100%}
.logo{width:150px;max-width:55%;height:auto;margin:0 auto}
header.hero h1{position:absolute;left:-9999px}
header.hero p.tag{font-size:17px;font-weight:500;color:#fff;opacity:1;margin-top:6px;max-width:360px}

/* Hero telefon — canlı tanıtım videosu (2026-09-07: eski mavi mockup PNG'si kaldırıldı). */
.hero-phone{position:relative;flex:0 0 auto;margin:20px auto 0;width:236px;max-width:64vw;
  border-radius:34px;padding:7px;background:#0b1a1c;
  box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.07)}
.hero-video{display:block;width:100%;height:auto;border-radius:27px;background:#0b1a1c}
/* Eski sınıf adı geriye dönük (başka sayfa referans verirse boş geçsin) */
.hero-mockup{display:none}

/* ≥880px: metin solda + CTA, mockup sağda — dikey tek-sütun yığılma yerine yan yana */
@media (min-width:880px){
  header.hero{padding:64px 0 56px}
  header.hero .wrap{flex-direction:row;align-items:center;justify-content:center;gap:64px;text-align:left}
  .hero-text{align-items:flex-start;width:auto;max-width:420px}
  .logo{margin:0}
  header.hero p.tag{max-width:none}
  .stores{justify-content:flex-start}
  .hero-phone{margin:0;width:262px;max-width:none}
}

/* Hero öne çıkanlar (kartlar) */
.highlights{margin:28px auto 0;max-width:780px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hl{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:16px 15px;text-align:left;backdrop-filter:blur(6px)}
.hl .i{font-size:24px;line-height:1}
.hl b{display:block;font-size:15px;font-weight:700;margin-top:9px}
.hl span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:2px}

/* Mağaza rozetleri (pasif "Yakında") */
.stores{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);border-radius:13px;padding:9px 17px;color:#fff;opacity:.55;cursor:default;user-select:none}
.store-badge .store-ic{display:inline-flex;align-items:center;justify-content:center}
.store-badge .store-tx{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.store-badge .store-tx small{font-size:11px;opacity:.85;font-weight:500}
.store-badge .store-tx strong{font-size:17px;font-weight:700;letter-spacing:.2px}
/* CANLI (yayında) rozet = resmi siyah store rozeti görünümü, tam renk, tıklanabilir */
a.store-badge.is-live{opacity:1;cursor:pointer;text-decoration:none;background:#000;border-color:#000;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .12s ease,box-shadow .12s ease}
a.store-badge.is-live:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.36)}
.store-ic{font-size:20px;line-height:1;width:22px;text-align:center}
.store-tx{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-tx small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.store-tx strong{font-size:16px;font-weight:700}

/* ---------- Marka bar + sekmeler ---------- */
.brandbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brandbar .wrap{display:flex;align-items:center;gap:14px;padding:11px 20px}
.brandbar .bl{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brandbar .bl img{height:28px;width:auto}
.brandbar .bl b{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
/* Dil menüsü .tabs'ın DIŞINDA (.navright içinde) — .tabs yatay kaydırınca açılır liste
   overflow ile kırpılmasın (2026-09-07: mobil üst menü "taşıyor görünmüyor"). */
.navright{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
/* Sekmeler TEK satır — sığmazsa yatay KAYAR (sığdığında scrollbar görünmez). Sarmal wrap
   yerine bu: dar ekranda "taşıp görünmez olma" sorununu kökten çözer (2026-09-07). */
.tabs{display:flex;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;color:var(--muted);font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;white-space:nowrap}
.tabs a:hover{background:var(--bg);text-decoration:none}
.tabs a.active{background:var(--c1);color:#fff}
.tabs a.lang{border:1px solid var(--line);color:var(--ink);margin-left:6px}
/* ≤920px: marka 1. satır, sekme+dil şeridi 2. satır tam-genişlik; sağ kenarda "devamı var"
   solması (yatay kaydırma ipucu). 6 dil-etiketi + dil pill'i tek satıra sığmıyordu. */
@media(max-width:920px){
  .brandbar .wrap{flex-wrap:wrap;gap:8px;padding:9px 14px}
  .brandbar .bl{flex:0 0 auto}
  .navright{width:100%;margin-left:0;gap:8px}
  .navright .tabs{flex:1;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .tabs a{padding:6px 11px;font-size:13px}
}

/* ---------- Sayfa başlığı şeridi (iç sayfalar) ---------- */
.phead{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--c1),var(--c3));color:#fff;padding:42px 0 36px}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 80% at 88% 10%,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.phead .wrap{position:relative}
.phead h1{font-size:32px;font-weight:800;letter-spacing:-.6px;margin-bottom:4px}
.phead p{color:rgba(255,255,255,.92);font-size:15.5px;max-width:680px}

/* ---------- Sections ---------- */
section{padding:40px 0}
section h2{font-size:26px;font-weight:800;margin-bottom:8px;color:var(--ink)}
section h2 .em{font-size:24px;margin-right:8px}
section h3{font-size:17px;font-weight:700;margin:20px 0 6px}
p,li{color:#334155}
ul{margin:8px 0 8px 22px}
li{margin:4px 0}
.updated{color:var(--muted);font-size:13px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:14px;box-shadow:var(--sh)}

/* Özet özellik kartları (anasayfa) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:22px;align-items:stretch}
.feat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.feat .fhead{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;background:var(--soft)}
.feat .fbody{padding:16px 18px 20px}
.feat .ftitle{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.feat .fi{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--soft);color:var(--c1)}
.feat .fi svg{width:21px;height:21px}
.feat h4{margin:0;font-size:16.5px;line-height:1.25}
.feat p{font-size:14px;color:var(--muted)}

/* Özellik detay satırları */
.rows{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch}
.row{display:flex;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh)}
.row .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--soft);color:var(--c1)}
.row .ic svg{width:24px;height:24px}
.row h4{font-size:16.5px;margin-bottom:4px}
.row p{font-size:14.5px;color:var(--muted)}

/* Özellik showcase — eski MAVİ app ekran görüntüleri KALDIRILDI (2026-09-07 kullanıcı) →
   metin-öncelikli kompakt kart ızgarası, turkuaz sol aksan çubuğu. */
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:8px}
.scrow{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c1);border-radius:14px;padding:20px 22px;box-shadow:var(--sh)}
.sctext h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:6px}
.sctext p{font-size:14.5px;color:var(--muted)}

/* Duyuru (öne çıkan) */
.ann{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:14px;box-shadow:var(--sh-lg)}
.ann img{width:100%;height:300px;object-fit:cover;display:block}
.ann{max-width:760px}
.ann .body{padding:28px 30px 30px}
.ann-meta{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c1);margin-bottom:8px}
.ann h3{margin:0 0 12px;font-size:25px;font-weight:800;color:var(--ink);line-height:1.25}
.ann .body p{font-size:15.5px;color:#334155;margin-bottom:12px}
.ann .body p:first-of-type{font-size:17px;color:var(--ink);line-height:1.75}
.ann .body h4{font-size:16px;font-weight:700;color:var(--c3);margin:20px 0 6px}

/* Makaleler grid (Öğren / Aksesuarlar) */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;margin-top:22px;align-items:stretch}
.post{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.post .cover{width:100%;height:194px;object-fit:cover;display:block}
.post>*{padding-left:22px;padding-right:22px}
.post .cover{padding:0}
.post h3{font-size:19px;font-weight:800;color:var(--ink);margin:18px 0 4px}
.post .lead{font-size:14.5px;color:var(--muted);margin-bottom:8px}
.post h4{font-size:15px;font-weight:700;color:var(--c3);margin:14px 0 4px}
.post p{font-size:14.5px;color:#334155;margin-bottom:8px}
.post>*:last-child{margin-bottom:20px}
.note{font-size:13px;color:var(--muted);font-style:italic}

/* Tablolar (gizlilik) */
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left}
th{background:#f1f5f9}

/* Makale önizleme kartları (kategori sayfaları) */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:22px;align-items:stretch}
.pcard{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s;text-decoration:none}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);text-decoration:none}
.pcard img{width:100%;height:188px;object-fit:cover;display:block}
.pcard .pb{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.pcard h3{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:5px;line-height:1.3}
.pcard p{font-size:14px;color:var(--muted);margin-bottom:14px}
.pcard .more{margin-top:auto;font-size:14px;font-weight:700;color:var(--c1)}

/* Bağlantı butonu (pill) */
.btn-link{display:inline-block;background:var(--soft);color:var(--c1);font-weight:700;font-size:14.5px;padding:9px 17px;border-radius:999px;margin:4px 8px 4px 0}
.btn-link:hover{text-decoration:none;background:#d3e9ea}

/* Tekil makale sayfası */
.ahero{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;background:#00565C}
.ahero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ahero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,28,.82),rgba(8,16,28,.15) 60%,rgba(8,16,28,.25))}
.ahero .wrap{position:relative;z-index:1;padding-top:30px;padding-bottom:26px;color:#fff}
.ahero h1{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.2;color:#fff;max-width:760px}
.ahero .lead{font-size:16px;color:rgba(255,255,255,.92);margin-top:8px;max-width:680px}
.article{max-width:760px}
.article .back{display:inline-block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:18px}
.article .afull{margin:4px 0 22px}
.article .afull img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:var(--sh)}
.article h4{font-size:17px;font-weight:700;color:var(--c3);margin:22px 0 6px}
.article p{font-size:16px;color:#334155;margin-bottom:10px;line-height:1.7}
.article .note{font-size:14px;color:var(--muted);font-style:italic;margin-top:12px;padding:12px 16px;background:var(--soft);border-radius:12px}
.article .more-wrap{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.article .more-wrap b{display:block;font-size:14px;color:var(--muted);margin-bottom:10px;font-weight:600}

footer{background:var(--ink);color:#cbd5e1;text-align:center;padding:34px 0;font-size:14px}
footer a{color:#5fc7cd}
.social-row{margin-top:14px}
.social-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#cbd5e1}
.social-ic:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

@media(max-width:600px){
  header.hero{padding:48px 0 40px}
  .phead h1{font-size:26px}
  section{padding:34px 0}
  .posts{grid-template-columns:1fr}
  /* (Üst menü iki-satır kuralı ≤920px bloğunda — burada yalnız gövde grid'leri) */
  /* Kart gridleri tek sütun → minmax min-genişliği kaynaklı gövde yatay taşmasını önle */
  .grid,.rows,.pcards{grid-template-columns:1fr}
  /* Geniş tablolar (KVKK/gizlilik) kendi içinde yatay kayar → gövde yana kaymaz */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}
  /* Showcase kart iç boşluğu daralt */
  .scrow{padding:18px 16px}
}

/* ---- Dil seçici (🌐 <details> menüsü — build.mjs üretir) ---- */
.langmenu{position:relative;margin-left:6px;flex:0 0 auto}
.langmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;white-space:nowrap;user-select:none}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary::marker{content:''}
.langmenu summary:hover{background:var(--bg)}
.langmenu[open] summary{background:var(--c1);color:#fff;border-color:var(--c1)}
.langmenu .langlist{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(15,32,54,.14);padding:6px;min-width:150px;display:flex;flex-direction:column;z-index:40}
.langmenu .langlist a{color:var(--ink);font-size:14px;font-weight:600;padding:8px 12px;border-radius:9px}
.langmenu .langlist a:hover{background:var(--bg);text-decoration:none}
.langmenu .langlist a.on{background:var(--c1);color:#fff}