/* Kagamio tanıtım sitesi — paylaşılan stiller.
   KAYNAK: bu dosya elle düzenlenir; sayfalar araclar/site_uret.py ile üretilir.
   Eskiden index.html içinde gömülüydü; çok sayfaya geçerken dışarı alındı. */
:root{
  --bg:#0b1524; --bg-2:#0f1b2d; --bg-3:#152438;
  --fg:#ffffff; --fg-2:#c3d0e0; --fg-3:#8ba3c4; --fg-4:#61748d;
  --mavi:#7ea0cc; --mavi-2:#a8c4e8;
  --k:#ff6b5e; --k-bg:rgba(255,107,94,.12); --k-line:rgba(255,107,94,.32);
  --u:#f5b944; --u-bg:rgba(245,185,68,.12); --u-line:rgba(245,185,68,.30);
  --g:#4fd1a5; --g-bg:rgba(79,209,165,.12); --g-line:rgba(79,209,165,.30);
  --cizgi:rgba(126,160,204,.16); --cizgi-2:rgba(126,160,204,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:"Manrope",system-ui,sans-serif; font-weight:800;
  letter-spacing:-.035em; line-height:1.06; margin:0}
a{color:inherit; text-decoration:none}
.kap{width:100%; max-width:1120px; margin:0 auto; padding:0 26px}
.orta{text-align:center}

/* ---------------------------------------------------------------- üst çubuk */
.ust{position:sticky; top:0; z-index:50; background:rgba(11,21,36,.78);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--cizgi)}
.ust .ic{display:flex; align-items:center; gap:12px; height:74px}
.marka{display:flex; align-items:center; gap:12px}
.marka svg{width:40px; height:40px; flex:none}
.marka .ad{font-family:"Manrope",sans-serif; font-weight:800; font-size:23px; letter-spacing:-.03em}
/* Dar ekranda logo büyürken sağdaki iki buton sıkışmasın */
@media (max-width:430px){
  .ust .ic{height:66px; gap:8px}
  .marka svg{width:33px; height:33px}
  .marka .ad{font-size:20px}
  .ust .sag{gap:7px}
  .btn-kucuk{padding:8px 12px; font-size:13px}
}
.ust .sag{margin-left:auto; display:flex; align-items:center; gap:10px}

/* <button> ÖĞELERİ İÇİN ÜÇ ZORUNLU SIFIRLAMA — hepsi tarayıcı varsayılanı sızdığı
   için gerekli, <a> etiketlerinde bu sorunlar yoktu:
   1) font-family:inherit — yoksa Arial'a düşüyor.
   2) background:none + appearance:none — yoksa varsayılan AÇIK GRİ buton zemini
      geliyor; .btn-cizgi yalnız kenarlık ve yazı rengi verdiği için açık zemine
      açık yazı biniyor ve "Vazgeç" okunmuyordu.
   3) cursor:pointer — <button>'ın varsayılan imleci ok. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14.5px; font-weight:600; padding:11px 20px; border-radius:10px;
  background:none; -webkit-appearance:none; appearance:none; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; transition:transform .12s, background .15s, border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-ana{background:linear-gradient(180deg,#fff,#e6edf7); color:#12233a; box-shadow:0 6px 18px -8px rgba(168,196,232,.7)}
.btn-cizgi{border-color:var(--cizgi-2); color:var(--fg-2)}
.btn-cizgi:hover{border-color:var(--mavi); color:#fff}
.btn-kucuk{padding:8px 15px; font-size:13.5px}

/* --------------------------------------------------------------------- hero */
.hero{position:relative; padding:104px 0 0; overflow:hidden}
.hero::before,.hero::after{content:""; position:absolute; pointer-events:none; border-radius:50%}
/* ayna motifi: üstte parlak disk, altta solan yansıma */
.hero::before{width:900px; height:900px; left:50%; top:-560px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(126,160,204,.26), rgba(126,160,204,.05) 45%, transparent 66%)}
.hero::after{width:620px; height:620px; right:-220px; bottom:-380px;
  background:radial-gradient(circle, rgba(79,209,165,.10), transparent 62%)}
.hero .ic{position:relative}
@keyframes nabiz{0%,100%{opacity:1} 50%{opacity:.35}}

h1.dev{font-size:clamp(38px, 6.6vw, 76px); margin:0; max-width:19ch}
h1.dev span{background:linear-gradient(180deg,#a8c4e8,#5f81ad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.alt{font-size:clamp(16.5px, 1.9vw, 20px); color:var(--fg-2); max-width:52ch; margin:22px 0 0}
.eylem{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ------------------------------------------------------- tarama animasyonu */
.tarayici{position:relative; margin:62px 0 0; border:1px solid var(--cizgi-2);
  border-radius:16px 16px 0 0; background:linear-gradient(180deg, rgba(21,36,56,.92), rgba(11,21,36,.92));
  box-shadow:0 -20px 60px -30px rgba(126,160,204,.4); overflow:hidden}
.tarayici .cubuk{display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--cizgi); font-size:12.5px; color:var(--fg-3)}
.tarayici .cubuk .lamba{width:9px; height:9px; border-radius:50%; background:var(--cizgi-2)}
.tarayici .cubuk .yol{margin-left:6px; font-family:ui-monospace,Menlo,monospace; font-size:11.5px}
.tarayici .cubuk .durum{margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--g)}
.tarayici .cubuk .durum i{width:6px; height:6px; border-radius:50%; background:var(--g);
  animation:nabiz 1.5s ease-in-out infinite}

.liste{position:relative}
/* tarama çizgisi: listenin üstünden aşağı süpürür */
.liste .isin{position:absolute; left:0; right:0; height:96px; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, transparent, rgba(126,160,204,.16) 62%, rgba(168,196,232,.75));
  box-shadow:0 0 22px rgba(126,160,204,.45);
  animation:supur 5.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes supur{0%{transform:translateY(-100px)} 70%,100%{transform:translateY(430px)}}

.satir{display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:14px; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--cizgi)}
.satir:last-child{border-bottom:0}
.satir .kim{font-size:12.5px; color:var(--fg-4); margin-bottom:3px}
.satir .metin{font-size:14.5px; color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.satir .metin em{font-style:normal; padding:1px 5px; border-radius:5px}
.satir.kritik .metin em{background:var(--k-bg); color:var(--k); box-shadow:inset 0 0 0 1px var(--k-line)}
.satir.uyari  .metin em{background:var(--u-bg); color:var(--u); box-shadow:inset 0 0 0 1px var(--u-line)}
.etiket{justify-self:end; display:inline-flex; align-items:center; gap:7px; font-size:11.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  opacity:0; animation:cik .5s ease forwards}
.etiket.k{background:var(--k-bg); color:var(--k); border:1px solid var(--k-line)}
.etiket.u{background:var(--u-bg); color:var(--u); border:1px solid var(--u-line)}
.etiket.g{background:var(--g-bg); color:var(--g); border:1px solid var(--g-line)}
@keyframes cik{from{opacity:0; transform:translateX(9px)} to{opacity:1; transform:none}}
.satir:nth-child(2) .etiket{animation-delay:.75s}
.satir:nth-child(3) .etiket{animation-delay:1.5s}
.satir:nth-child(4) .etiket{animation-delay:2.25s}
.satir:nth-child(5) .etiket{animation-delay:3s}
.satir:nth-child(6) .etiket{animation-delay:3.75s}
@media (prefers-reduced-motion:reduce){
  .liste .isin{display:none}
  .etiket{opacity:1; animation:none}
  .tarayici .cubuk .durum i{animation:none}
}
@media (max-width:620px){
  .satir{grid-template-columns:minmax(0,1fr) 96px; padding:13px 14px}
  .satir .metin{font-size:13.5px}
  .etiket{font-size:10.5px; padding:4px 8px}
}

/* ------------------------------------------------------------------ rakamlar */
.rakamlar{border-top:1px solid var(--cizgi); border-bottom:1px solid var(--cizgi);
  background:var(--bg-2)}
.rakamlar .ic{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:34px 26px}
.rakamlar .r{font-family:"Manrope",sans-serif; font-weight:800; font-size:clamp(24px,3vw,34px);
  letter-spacing:-.03em; background:linear-gradient(180deg,#fff,#a8c4e8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.rakamlar .e{font-size:12.5px; color:var(--fg-3); margin-top:5px; line-height:1.45}
@media (max-width:760px){ .rakamlar .ic{grid-template-columns:repeat(2,1fr); gap:26px 20px} }

/* ------------------------------------------------------------------ bölümler */
section{padding:96px 0}
.etiket-bas{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mavi); margin-bottom:16px}
h2{font-size:clamp(28px,4.2vw,46px); max-width:22ch}
.orta h2{margin-inline:auto}
.h2alt{font-size:17px; color:var(--fg-3); max-width:48ch; margin:18px 0 0}
.orta .h2alt{margin-inline:auto}

/* --- üç sinyal */
.sinyaller{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
@media (max-width:880px){ .sinyaller{grid-template-columns:1fr} }
.sinyal{border:1px solid var(--cizgi); border-radius:14px; padding:22px; background:var(--bg-2);
  transition:transform .15s, border-color .15s}
.sinyal:hover{transform:translateY(-3px)}
.sinyal.k{border-top:2px solid var(--k)} .sinyal.k:hover{border-color:var(--k-line)}
.sinyal.u{border-top:2px solid var(--u)} .sinyal.u:hover{border-color:var(--u-line)}
.sinyal.g{border-top:2px solid var(--g)} .sinyal.g:hover{border-color:var(--g-line)}
.sinyal .ad{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.sinyal.k .ad{color:var(--k)} .sinyal.u .ad{color:var(--u)} .sinyal.g .ad{color:var(--g)}
.sinyal .soz{font-size:16px; color:var(--fg); margin:14px 0 0; line-height:1.5}
.sinyal .not{font-size:13.5px; color:var(--fg-4); margin:12px 0 0}

/* --------------------------------------------------- tespit kataloğu (#6) */
/* Kart: risk rozeti + başlık + tek satır tanım + gerçek örnek + dayanak.
   Metin bilerek kısa: bu bölüm okunmak değil TARANMAK için var. */
.tespitler{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px}
@media (max-width:1000px){ .tespitler{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tespitler{grid-template-columns:1fr} }
.tespit{display:flex; flex-direction:column; border:1px solid var(--cizgi);
  border-radius:14px; padding:20px; background:var(--bg-2);
  transition:transform .15s, border-color .15s}
.tespit:hover{transform:translateY(-3px); border-color:var(--cizgi-2)}
.tespit.k{border-top:2px solid var(--k)} .tespit.u{border-top:2px solid var(--u)}
.tespit .ust-satir{display:flex; align-items:flex-start; gap:10px; margin-bottom:11px}
.tespit h3{font-size:16.5px; letter-spacing:-.02em; line-height:1.25; flex:1; min-width:0}
.rozet{flex:none; font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 8px; border-radius:6px; white-space:nowrap;
  margin-top:1px}
.rozet.k{background:var(--k-bg); color:var(--k); border:1px solid var(--k-line)}
.rozet.u{background:var(--u-bg); color:var(--u); border:1px solid var(--u-line)}
.tespit .tanim{font-size:14px; color:var(--fg-3); margin:0; line-height:1.5}
/* Örnek alıntı: sol çizgi ile ayrılıyor, italik. Tümü KURGUSAL. */
.tespit .ornek{font-size:13.5px; font-style:italic; color:var(--fg-2); margin:14px 0 0;
  padding-left:12px; border-left:2px solid var(--cizgi-2); line-height:1.5}
.tespit .dayanak{margin-top:auto; padding-top:14px; font-size:11.5px; color:var(--fg-4);
  font-weight:600; letter-spacing:.02em}
.tespit-not{font-size:12.5px; color:var(--fg-4); margin:22px 0 0; line-height:1.55}

/* ------------------------------------------------- iki mod görseli (#7) */
/* SOLDAKİ PANEL HENÜZ ÜRÜNDE YOK — Outlook eklentisi yapım aşamasında.
   Bu yüzden başlığında "Yakında" rozeti var ve bölüm metni de bunu açıkça
   söylüyor. Sağdaki panel bugün canlı. Saf CSS, harici kütüphane yok. */
.modlar{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px}
@media (max-width:900px){ .modlar{grid-template-columns:1fr} }
.mod{border:1px solid var(--cizgi-2); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(21,36,56,.92), rgba(11,21,36,.95));
  display:flex; flex-direction:column}
.mod-bas{display:flex; align-items:center; gap:8px; padding:12px 15px;
  border-bottom:1px solid var(--cizgi); font-size:12.5px; color:var(--fg-3)}
.mod-bas .lamba{width:9px; height:9px; border-radius:50%; background:var(--cizgi-2); flex:none}
.mod-bas .ad{margin-left:6px; font-family:ui-monospace,Menlo,monospace; font-size:11.5px}
.mod-durum{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap}
.mod-durum.yakinda{background:rgba(126,160,204,.14); color:var(--mavi-2);
  border:1px solid var(--cizgi-2)}
.mod-durum.canli{background:var(--g-bg); color:var(--g); border:1px solid var(--g-line)}
.mod-govde{padding:17px; flex:1}

/* --- sol: Outlook compose taklidi */
.yz-satir{display:flex; gap:9px; font-size:12.5px; color:var(--fg-4); margin-bottom:5px}
.yz-satir b{color:var(--fg-3); font-weight:600; min-width:42px}
.yz-konu{font-size:14px; color:var(--fg); font-weight:600; margin:11px 0 13px}
.yz-metin{font-size:13.5px; color:var(--fg-2); line-height:1.75; margin:0}
.yz-metin mark{background:none; padding:1px 5px; border-radius:5px}
.yz-metin mark.k{background:var(--k-bg); color:var(--k); box-shadow:inset 0 0 0 1px var(--k-line)}
.yz-metin mark.u{background:var(--u-bg); color:var(--u); box-shadow:inset 0 0 0 1px var(--u-line)}
/* eklentinin compose içinde açtığı uyarı kartı */
.yz-uyari{margin-top:16px; border:1px solid var(--k-line); border-radius:11px;
  background:var(--k-bg); padding:13px}
.yz-uyari .bas{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--k)}
.yz-uyari p{font-size:13px; color:var(--fg-2); margin:9px 0 0; line-height:1.5}
.yz-uyari .day{font-size:11.5px; color:var(--fg-4); margin-top:9px; font-weight:600}
.yz-dugme{display:flex; gap:8px; margin-top:13px}
.yz-dugme span{font-size:12px; font-weight:600; padding:7px 14px; border-radius:8px}
.yz-dugme .bir{background:linear-gradient(180deg,#fff,#e6edf7); color:#12233a}
.yz-dugme .iki{border:1px solid var(--cizgi-2); color:var(--fg-3)}

/* --- sağ: uyum paneli taklidi */
.pn-sayac{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:15px}
.pn-sayac div{text-align:center; padding:11px 5px; border-radius:10px;
  border:1px solid var(--cizgi); background:rgba(11,21,36,.5)}
.pn-sayac .s{font-family:"Manrope",sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-.03em; line-height:1}
.pn-sayac .e{font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-4); margin-top:5px}
.pn-sayac .s.k{color:var(--k)} .pn-sayac .s.u{color:var(--u)}
.pn-sayac .s.g{color:var(--g)} .pn-sayac .s.t{color:var(--fg)}
.pn-satir{display:flex; align-items:center; gap:11px; padding:10px 2px;
  border-top:1px solid var(--cizgi)}
.pn-satir .bh{width:27px; height:27px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  font-weight:700; background:rgba(126,160,204,.14); color:var(--mavi-2)}
.pn-satir .ic{flex:1; min-width:0}
.pn-satir .kim{font-size:12.5px; color:var(--fg-2); font-weight:600}
.pn-satir .ne{font-size:12px; color:var(--fg-4); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.pn-satir .rz{flex:none; font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 8px; border-radius:6px}
.pn-satir .rz.k{background:var(--k-bg); color:var(--k); border:1px solid var(--k-line)}
.pn-satir .rz.u{background:var(--u-bg); color:var(--u); border:1px solid var(--u-line)}
.pn-satir .rz.g{background:var(--g-bg); color:var(--g); border:1px solid var(--g-line)}
.mod-not{font-size:12.5px; color:var(--fg-4); margin:20px 0 0; line-height:1.55}

/* --- yetenek kartları */
.kartlar{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px}
@media (max-width:820px){ .kartlar{grid-template-columns:1fr} }
.kart{border:1px solid var(--cizgi); border-radius:14px; padding:26px; background:var(--bg-2);
  display:flex; gap:17px; align-items:flex-start; transition:border-color .15s, transform .15s}
.kart:hover{border-color:var(--cizgi-2); transform:translateY(-2px)}
.kart .ik{width:40px; height:40px; flex:none; border-radius:11px; display:flex;
  align-items:center; justify-content:center; color:var(--mavi-2);
  background:rgba(126,160,204,.12); border:1px solid var(--cizgi-2)}
.kart .ik svg{width:20px; height:20px}
.kart h3{font-size:17px; letter-spacing:-.02em}
.kart p{font-size:14.8px; color:var(--fg-3); margin:8px 0 0}

/* --- kapanış çağrısı */
.cagri{border:1px solid var(--cizgi-2); border-radius:20px; padding:56px 30px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(126,160,204,.16), transparent 62%), var(--bg-2)}
.cagri h2{max-width:24ch}
.cagri .eylem{justify-content:center}

/* ------------------------------------------------------------------ altbilgi */
footer{border-top:1px solid var(--cizgi); padding:38px 0; font-size:13.5px; color:var(--fg-4)}
/* Kagami metni üç satıra çıktığı için telif ORTADA değil ALTA hizalanır;
   yoksa sağda havada asılı duruyor. */
footer .ic{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:flex-end}
footer .ayna{flex:1 1 420px; min-width:0}
footer a:hover{color:var(--fg-2)}
footer .telif{margin-left:auto}

/* ------------------------------------------------------- iletişim penceresi */
/* Kendi panelimiz: mailto ile üçüncü bir uygulamaya çıkmıyoruz. Form POST'u
   Caddy tarafından AYNI origin'den /api/iletisim'e proxy'lenir.
   JS çalışmazsa (ya da <dialog> desteklenmezse) butonlar mailto bağlantısı
   olarak kalır — kimse boşa tıklamış olmaz. */
/* Yükseklik: 720px'lik dizüstü ekranında panel tam sığsın diye ölçüler sıkı
   tutuldu (ilk denemede içerik 717px, pencere 662px'ti — alt kenar kesiliyordu).
   Yine de sığmazsa panel KENDİ İÇİNDE kayar; overscroll-behavior arkadaki
   sayfanın birlikte kaymasını engeller. */
dialog.il{border:0; padding:0; margin:auto; background:transparent;
  width:min(540px, 94vw); max-height:94vh; overflow-y:auto;
  overscroll-behavior:contain; color:var(--fg)}
dialog.il::backdrop{background:rgba(3,8,15,.74);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
html.il-acik{overflow:hidden}
.il-kutu{position:relative; border:1px solid var(--cizgi-2); border-radius:18px;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  padding:24px 26px 22px; box-shadow:0 40px 100px -45px #000}
.il-kutu h2{font-size:22px; max-width:none}
.il-kutu .h2alt{font-size:14.5px; margin-top:8px; max-width:42ch}
.il-kapat{position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:9px;
  border:1px solid transparent; background:none; color:var(--fg-3); cursor:pointer}
.il-kapat:hover{background:rgba(126,160,204,.14); color:#fff}
.il-form{margin-top:18px}
.il-ikili{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:540px){ .il-ikili{grid-template-columns:1fr} }
.il-alan{margin-top:11px; min-width:0}
.il-alan:first-child{margin-top:0}
.il-alan label{display:block; font-size:12.5px; font-weight:600; color:var(--fg-3);
  margin-bottom:6px; letter-spacing:.01em}
.il-alan label i{font-style:normal; color:var(--mavi)}
.il-alan input, .il-alan textarea{display:block; width:100%; font:inherit; font-size:15px;
  color:var(--fg); background:rgba(11,21,36,.72); border:1px solid var(--cizgi-2);
  border-radius:10px; padding:11px 13px; transition:border-color .14s}
.il-alan textarea{resize:vertical; min-height:70px; line-height:1.55}
.il-alan input::placeholder, .il-alan textarea::placeholder{color:var(--fg-4)}
.il-alan input:focus, .il-alan textarea:focus{outline:none; border-color:var(--mavi);
  box-shadow:0 0 0 3px rgba(126,160,204,.18)}
/* bot tuzağı: ekranda ve ekran okuyucuda yok, DOM'da var */
.il-tuzak{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.il-alt{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px}
.il-alt .btn-ana{min-width:120px}
.il-not{font-size:12px; color:var(--fg-4); line-height:1.5; margin:12px 0 0}
.il-durum{font-size:13.5px; line-height:1.5; margin:14px 0 0; padding:11px 13px;
  border-radius:10px; display:none}
.il-durum.hata{display:block; background:var(--k-bg); color:var(--k);
  border:1px solid var(--k-line)}
.il-tamam{display:none; margin-top:22px; padding:22px; text-align:center;
  border:1px solid var(--g-line); border-radius:14px; background:var(--g-bg)}
.il-tamam.acik{display:block}
.il-tamam .ik{width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--g);
  border:1px solid var(--g-line); background:rgba(79,209,165,.14)}
.il-tamam b{display:block; font-size:16.5px}
.il-tamam p{font-size:14px; color:var(--fg-3); margin:7px 0 0}

/* ==================================================== çok sayfa: üst menü */
/* Sıralama: marka · menü · (esnek boşluk) · Demo/İletişim · mobil hamburger */
.menu{display:flex; align-items:center; gap:2px; margin-left:22px}
.menu-bag{font-size:14.5px; font-weight:500; color:var(--fg-3); padding:8px 12px;
  border-radius:8px; transition:color .14s, background .14s; white-space:nowrap}
.menu-bag:hover{color:#fff; background:rgba(126,160,204,.10)}
/* Bulunduğumuz sayfa aria-current ile işaretli — hem ekran okuyucu hem CSS
   aynı kaynaktan anlıyor, ayrı bir "aktif" sınıfı tutmuyoruz. */
.menu-bag[aria-current="page"]{color:#fff; background:rgba(126,160,204,.14)}

.mob{display:none}                      /* masaüstünde hamburger yok */
.mob>summary{list-style:none; cursor:pointer; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; color:var(--fg-2);
  border:1px solid var(--cizgi-2); border-radius:9px}
.mob>summary::-webkit-details-marker{display:none}
.mob>summary::marker{content:""}
.mob[open]>summary{background:rgba(126,160,204,.14); color:#fff}
.mob-liste{position:absolute; right:0; top:calc(100% + 10px); z-index:60;
  min-width:215px; padding:8px; border-radius:12px; border:1px solid var(--cizgi-2);
  background:var(--bg-3); box-shadow:0 26px 60px -24px #000;
  display:flex; flex-direction:column; gap:2px}
.mob-bag,.mob-demo{font-size:15px; padding:10px 12px; border-radius:8px; color:var(--fg-2)}
.mob-bag:hover,.mob-demo:hover{background:rgba(126,160,204,.12); color:#fff}
.mob-bag[aria-current="page"]{color:#fff; background:rgba(126,160,204,.16)}
.mob-demo{margin-top:6px; padding-top:13px; border-top:1px solid var(--cizgi);
  color:var(--mavi-2); font-weight:600}

/* 900px altında menü hamburgere giriyor: beş bağlantı + iki buton sığmıyor. */
@media (max-width:900px){
  .menu{display:none}
  .mob{display:block; position:relative; margin-left:10px}
}
/* 560px altında Demo butonu da gizleniyor — mobil menünün içinde zaten var. */
@media (max-width:560px){
  .ust .sag .btn-cizgi{display:none}
}

/* -------------------------------------------------- altbilgi sayfa menüsü */
.alt-menu{display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:18px; font-size:13px}
.alt-menu a{color:var(--fg-3)}
.alt-menu a:hover{color:var(--fg-2)}

/* ============================================ iç sayfa başlığı (ozellikler vb.) */
.sayfa-bas{padding:78px 0 0; position:relative; overflow:hidden}
.sayfa-bas::before{content:""; position:absolute; pointer-events:none; border-radius:50%;
  width:780px; height:780px; left:50%; top:-520px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(126,160,204,.20), rgba(126,160,204,.04) 45%, transparent 66%)}
.sayfa-bas .kap{position:relative}
h1.orta-bas{font-family:"Manrope",system-ui,sans-serif; font-weight:800;
  letter-spacing:-.035em; line-height:1.08; font-size:clamp(31px, 4.6vw, 52px);
  max-width:26ch; margin:0}
.sayfa-bas .alt{max-width:56ch}

/* ------------------------------------------------ iki modun geniş kartları */
.ozk{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px}
@media (max-width:880px){ .ozk{grid-template-columns:1fr} }
.ozk-kart{border:1px solid var(--cizgi); border-radius:16px; padding:26px;
  background:var(--bg-2)}
.ozk-bas{display:flex; align-items:center; gap:12px; margin-bottom:13px}
.ozk-bas h3{font-size:19px; letter-spacing:-.02em; flex:1; min-width:0}
.ozk-kart p{font-size:14.8px; color:var(--fg-3); margin:0; line-height:1.6}
.ozk-liste{list-style:none; padding:0; margin:17px 0 0}
.ozk-liste li{position:relative; padding-left:19px; font-size:14px; color:var(--fg-2);
  line-height:1.5; margin-top:9px}
.ozk-liste li::before{content:""; position:absolute; left:2px; top:8px; width:6px;
  height:6px; border-radius:50%; background:var(--mavi)}

/* ------------------------------------------------------- güvenli/kritik kıyası */
.kiyas{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px}
@media (max-width:880px){ .kiyas{grid-template-columns:1fr} }
.kiyas-kart{border:1px solid var(--g-line); border-radius:14px; padding:22px;
  background:var(--bg-2)}
.kiyas-kart.k{border-color:var(--k-line)}
.kiyas-ust{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:15px}
.kiyas-not{font-size:12px; color:var(--fg-4)}
.rozet.g{background:var(--g-bg); color:var(--g); border:1px solid var(--g-line)}
.kiyas-soz{font-size:16px; color:var(--fg); margin:0; line-height:1.55}
.kiyas-ac{font-size:14px; color:var(--fg-3); margin:14px 0 0; line-height:1.6}

/* --------------------------------------------------------------- kanallar */
.kanallar{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px}
@media (max-width:940px){ .kanallar{grid-template-columns:1fr} }
.kanal{border:1px solid var(--cizgi); border-radius:14px; padding:22px; background:var(--bg-2)}
.kanal-bas{font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mavi); margin-bottom:15px}
.kanal ul{list-style:none; padding:0; margin:0}
.kanal li{font-size:14.8px; color:var(--fg); padding:8px 0; border-top:1px solid var(--cizgi)}
.kanal li:first-child{border-top:0; padding-top:0}
.kanal-not{font-size:13px; color:var(--fg-4); margin:15px 0 0; line-height:1.55}

/* ----------------------------------------------------- sektör veritabanı */
.vt{display:grid; grid-template-columns:300px 1fr; gap:34px; margin-top:40px;
  align-items:start}
@media (max-width:880px){ .vt{grid-template-columns:1fr; gap:26px} }
.vt-sayilar{display:flex; flex-direction:column; gap:14px}
.vt-sayilar>div{border:1px solid var(--cizgi); border-radius:13px; padding:18px 20px;
  background:var(--bg-2)}
.vt-sayilar .r{font-family:"Manrope",sans-serif; font-weight:800; font-size:31px;
  letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,#fff,#a8c4e8); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.vt-sayilar .e{font-size:12.5px; color:var(--fg-3); margin-top:7px}
.vt-metin p{font-size:15.5px; color:var(--fg-3); margin:0; line-height:1.7}

/* ------------------------------------------------- destekleyici özellikler */
.destek{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px}
@media (max-width:940px){ .destek{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .destek{grid-template-columns:1fr} }
.dk{border:1px solid var(--cizgi); border-radius:12px; padding:18px; background:var(--bg-2)}
.dk b{display:block; font-size:15px; color:var(--fg); letter-spacing:-.01em}
.dk span{display:block; font-size:13.5px; color:var(--fg-3); margin-top:7px; line-height:1.55}