:root{
  --c1:#0C7DF5; --c2:#0C7DF5; --c3:#0A5FD0; --soft:#e9f2ff;
  --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:#0ea5b7}
/* 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}

/* Uygulama mockup'ı — üst pil/hava-skoru kartı (yoğun harita+etiket kısmı kırpılıp aşağı doğru
   soluklaştırıldı: küçük boyutta okunaklı kalsın diye — bkz. web-public/app-mockup-hero.png üretim
   notu, orijinal tam ekran görüntüsü app-mockup.png'de duruyor) */
.hero-mockup{display:block;margin:18px auto 0;width:100%;height:auto;max-width:320px}

/* ≥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-mockup{margin:0;max-width:340px}
}

/* 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}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.tabs a{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}

/* ---------- 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:44px 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 (telefon çerçeveli ekran görüntüsü) */
.showcase{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.scrow{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 32px;box-shadow:var(--sh)}
.scrow:nth-child(even){grid-template-columns:1fr 250px}
.scrow:nth-child(even) .phone{order:2}
.phone{width:228px;margin:0 auto;border:9px solid #0f1b2d;border-radius:30px;overflow:hidden;background:#0f1b2d;box-shadow:0 16px 38px rgba(16,26,40,.22)}
.phone img{display:block;width:100%}
.sctext h3{font-size:21px;font-weight:800;color:var(--ink);margin-bottom:8px}
.sctext p{font-size:15.5px;color:var(--muted)}
@media(max-width:640px){
  .scrow,.scrow:nth-child(even){grid-template-columns:1fr}
  .scrow:nth-child(even) .phone{order:0}
}

/* 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:#dbeafe}

/* Tekil makale sayfası */
.ahero{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;background:#0A5FD0}
.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:#7dd3fc}
.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ü: markayı üste al, sekmeleri altında ortalı sarmal pill şeridi yap
     (mobilde tek satırda dağınık sarma yerine düzenli iki satır) */
  .brandbar .wrap{flex-direction:column;align-items:stretch;gap:9px;padding:10px 16px}
  .brandbar .bl{justify-content:flex-start}
  .tabs{margin-left:0;justify-content:center;gap:5px}
  .tabs a{padding:6px 11px;font-size:13px}
  /* 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:22px 18px;gap:18px}
}

/* ---- Dil seçici (🌐 <details> menüsü — build.mjs üretir) ---- */
.langmenu{position:relative;margin-left:6px}
.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}