/* ============================================================
   VİZEPUSULA — STİL KATMANI · v3 "İnsan Eli"
   Sıcak koyu palet (kâğıt + pirinç), hap rozet yok, durumlar
   kenar şeridi ve damgayla anlatılır. Radius disiplini: 8px.
   ============================================================ */

:root {
  /* Atlas: kâğıt harita esteti — açık, ferah, nötr-sıcak */
  --zemin:      #F6F5F2;
  --panel:      #FFFFFF;
  --panel-ust:  #F1EFEA;
  --cizgi:      #E5E3DE;
  --metin:      #1E2126;          /* mürekkep */
  --metin-soluk:#6E7178;
  --pirinc:     #22354F;          /* vurgu: mürekkep lacivert */
  --pirinc-koyu:#16233A;

  /* Durum renkleri: açık zemin için bir ton derin */
  --yesil:      #2E8B57;
  --mavi:       #2F6FD0;
  --petrol:     #12857F;
  --sari:       #C08A1E;
  --kirmizi:    #C14848;
  --harita-bos: #8C8B86;   /* veride olmayan yerler: koyu gri */

  --r: 8px;                        /* tek radius, her yerde */
  --gecis: 160ms ease;
  --govde:  "Manrope", system-ui, -apple-system, sans-serif;
  --baslik: "Fraunces", Georgia, serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; border-radius: 4px; }

/* ── ÜST BAR ─────────────────────────────────────────────── */
.ustbar {
  height: 54px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--cizgi);
}
.logo { font-family: var(--baslik); font-size: 17px; font-weight:600; letter-spacing:.02em; }
.logo .vurgu { color: var(--pirinc); font-style: italic; }
.ustbar-sag { display:flex; align-items:center; gap:14px; }
.ust-rozet { font-size: 11.5px; color: var(--metin-soluk); white-space:nowrap; }
.ust-rozet b { color: var(--pirinc); font-family: var(--baslik); font-size: 13px; }

/* ── ANA IZGARA ──────────────────────────────────────────── */
.uygulama {
  display: grid;
  grid-template-columns: 235px minmax(0,1fr) 350px;
  gap: 14px;
  height: calc(100dvh - 54px);
  padding: 14px 16px;
}

/* ── SOL ─────────────────────────────────────────────────── */
.sol { display:flex; flex-direction:column; gap:10px; overflow:hidden; min-height:0; }
.sol-govde { flex:1 1 auto; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:10px; }
.sol::-webkit-scrollbar { width:0; }

.kimlik {
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  padding: 14px 15px;
}

.kimlik h1 { font-family: var(--baslik); font-size: 16px; font-weight:600; margin-top:6px; line-height:1.3; }
.kimlik p  { font-size: 11.5px; color: var(--metin-soluk); margin-top: 5px; }

.ist-kutu {
  background: var(--panel); border:1px solid var(--cizgi);
  box-shadow: 0 1px 2px rgba(30,33,38,.04);
  border-radius: var(--r); padding: 10px 15px;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.ist-kutu .ad    { font-size: 11.5px; color: var(--metin-soluk); }
.ist-kutu .deger { font-family: var(--baslik); font-size: 21px; font-weight:600; color: var(--pirinc); }

/* Lejant = filtre (nokta değil, şerit) */
.lejant { background: var(--panel); border:1px solid var(--cizgi); border-radius: var(--r); padding: 12px; }
.lejant h2 { font-size: 11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--metin-soluk); margin-bottom: 8px; }
.lejant .ipucu { font-size:10.5px; color:var(--metin-soluk); margin-top:9px; line-height:1.45; }
.lejant-satir {
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-left:3px solid transparent;
  padding: 7px 8px 7px 9px; color: var(--metin);
  font-size: 12.5px; font-weight:600; text-align:left;
  transition: all var(--gecis);
}
.lejant-satir:hover { background: var(--panel-ust); }
.lejant-satir.aktif { background: var(--panel-ust); border-left-color: var(--pirinc); }
.lejant-satir .nokta { width: 14px; height: 8px; border-radius:2px; flex-shrink:0; }
.lejant-satir .adet { margin-left:auto; font-family: var(--baslik); font-size:13px; color: var(--metin-soluk); }
.lejant-satir.aktif .adet { color: var(--pirinc); }
.n-yesil{background:var(--yesil)} .n-mavi{background:var(--mavi)}
.n-petrol{background:var(--petrol)}
.n-sari{background:var(--sari)}   .n-kirmizi{background:var(--kirmizi)}

.veri-notu { font-size: 10.5px; color: var(--metin-soluk); padding: 0 4px; line-height:1.5; }

/* Sol alt köşe: kurumsal footer */
.altbilgi { flex-shrink:0; padding:11px 4px 2px; border-top:1px solid var(--cizgi); display:flex; flex-direction:column; gap:8px; }
.altbilgi-sosyal { display:flex; align-items:center; gap:14px; }
.altbilgi-sosyal a { display:inline-flex; color: var(--metin-soluk); transition: color var(--gecis); }
.altbilgi-sosyal a svg { display:block; width:15px; height:15px; }
.altbilgi-sosyal a:hover { color: var(--pirinc); }
.altbilgi-metin { display:flex; flex-direction:column; gap:1px; line-height:1.4; }
.altbilgi-metin strong { font-family: var(--baslik); font-size:12px; font-weight:600; color: var(--metin); letter-spacing:.01em; white-space:nowrap; }
.altbilgi-metin span { font-size:10px; color: var(--metin-soluk); white-space:nowrap; }

/* ── ORTA: HARİTA + TREND ────────────────────────────────── */
.orta { display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; }

.harita-kap {
  position:relative; flex:1; min-height:0;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow:hidden;
}
.harita-kap svg { display:block; width:100%; height:100%; }

/* Hover: parça yerinden oynamaz; dolgu aydınlanır + gölge düşer → "kalkma" hissi */
.harita-kap .ulke-yol {
  cursor:pointer; stroke:#FFFFFF; stroke-width:.5; 
  transition: fill-opacity var(--gecis), opacity var(--gecis), filter 180ms ease;
}
.harita-kap .ulke-yol:hover {
  filter: brightness(.9) saturate(1.15);
}
.harita-kap .ulke-yol.soluk { opacity:.22; }
/* seçili ülke: pirinç parlak kontur + yumuşak glow (Atlas dili, non-scaling stroke) */
.harita-kap .ulke-yol.secili {
  stroke:#C9962B; stroke-width:2; vector-effect:non-scaling-stroke;
}
/* glow yalnız kamera uçuşu bitince eklenir: büyük ülkelerde filtre her animasyon
   karesinde dev silüeti rasterize edip WebKit'i kilitliyordu (durağan tek raster ucuz) */
.harita-kap .ulke-yol.parlak {
  filter: url(#seciliGlow);   /* native SVG filtresi — Chromium + WebKit tutarlı */
}

.harita-yukleniyor {
  position:absolute; inset:0; display:grid; place-items:center;
  color: var(--metin-soluk); font-size: 13px; text-align:center; padding:20px; line-height:1.6;
}

.zoom-butonlar { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; }
.zoom-butonlar button {
  width:30px; height:30px; border-radius: 6px;
  background: var(--panel-ust); border:1px solid var(--cizgi);
  color: var(--metin); font-size:15px; line-height:1;
  transition: all var(--gecis);
}
.zoom-butonlar button:hover { border-color: var(--pirinc); color: var(--pirinc); }

.ipucu-balon {
  position:absolute; pointer-events:none; z-index:10;
  background: #FFFFFF; border:1px solid var(--cizgi);
  box-shadow: 0 6px 18px rgba(30,33,38,.12);
  border-radius: 6px; padding: 8px 11px;
  font-size:12px; opacity:0; transition: opacity 100ms;
  max-width: 230px; line-height:1.4;
}
.ipucu-balon .durum-metin { display:block; margin-top:2px; }

.bayrak-img { display:block; border-radius:3px; box-shadow: 0 0 0 1px rgba(30,33,38,.14); flex-shrink:0; }
.kimlik-bayrak { margin-bottom: 10px; }
.balon-baslik { display:flex; align-items:center; gap:7px; margin-bottom:3px; }

/* Ayrı poligonu olmayan yerler (Hong Kong, KKTC, Tuvalu): bayrak işaretçi */
.harita-kap .mini-ulke { cursor:pointer; transition: opacity var(--gecis), filter 160ms ease; }
.harita-kap .mini-ulke image { filter: drop-shadow(0 1px 1.6px rgba(30,33,38,.3)); }
.harita-kap .mini-ulke .mini-cerceve { stroke-width:1.6; }
.harita-kap .mini-ulke:hover { filter: brightness(.94) saturate(1.12); }
.harita-kap .mini-ulke:hover .mini-cerceve { stroke-width:2.2; }
.harita-kap .mini-ulke.soluk { opacity:.22; }
.harita-kap .mini-ulke.secili .mini-cerceve { stroke-width:2.6; }

.not-etiketi {
  flex-shrink:0; align-self:flex-start;
  font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sari); border:1px solid currentColor; border-radius:4px;
  padding:2px 6px; margin-top:1px;
}

/* Düz renkli durum metni — hap yok */
.durum-metin { font-size: 10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.durum-metin[data-renk="yesil"]   { color: var(--yesil); }
.durum-metin[data-renk="mavi"]    { color: var(--mavi); }
.durum-metin[data-renk="petrol"]  { color: var(--petrol); }
.durum-metin[data-renk="sari"]    { color: var(--sari); }
.durum-metin[data-renk="kirmizi"] { color: var(--kirmizi); }

/* Trend */
.trend {
  height: 128px; flex-shrink:0;
  background: var(--panel); border:1px solid var(--cizgi);
  border-radius: var(--r); padding: 10px 14px 6px;
}
.trend-baslik { display:flex; justify-content:space-between; align-items:baseline; }
.trend-baslik h2 { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--metin-soluk); }
.trend-baslik span { font-size:10.5px; color:var(--metin-soluk); }
.trend svg { width:100%; height: calc(100% - 20px); display:block; }

/* ── SAĞ PANEL ───────────────────────────────────────────── */
.sag {
  position:relative;
  background: var(--panel); border:1px solid var(--cizgi);
  box-shadow: 0 1px 3px rgba(30,33,38,.05);
  border-radius: var(--r);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}
.sag-ust { padding: 12px 12px 0; flex-shrink:0; }
.arama {
  display:flex; align-items:center; gap:9px;
  background: var(--zemin); border:1px solid var(--cizgi);
  border-radius: var(--r); padding: 0 12px; height: 42px;
  transition: border-color var(--gecis);
}
.arama:focus-within { border-color: var(--pirinc); }
.arama svg { flex-shrink:0; color: var(--metin-soluk); }
.arama input { flex:1; background:none; border:0; outline:0; color:var(--metin); font:inherit; font-size:14px; min-width:0; }
.arama input::placeholder { color: var(--metin-soluk); }

/* Bölgeler: hap değil, alt çizgili sekme */
.bolgeler { display:flex; gap:2px; margin-top:6px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--cizgi); }
.bolgeler::-webkit-scrollbar { display:none; }
.bolge-cip {
  border:0; border-bottom:2px solid transparent; background:none;
  color:var(--metin-soluk); padding: 9px 9px; font-size:12px; font-weight:700;
  white-space:nowrap; transition: all var(--gecis); margin-bottom:-1px;
}
.bolge-cip:hover { color: var(--metin); }
.bolge-cip.aktif { color: var(--pirinc); border-bottom-color: var(--pirinc); }

.sonuc-bilgi { padding: 8px 14px 0; font-size: 11px; color: var(--metin-soluk); flex-shrink:0; }
.sonuc-bilgi b { color: var(--metin); font-family: var(--baslik); }

.ulke-listesi { flex:1; overflow-y:auto; padding: 8px; min-height:0; }
.ulke-listesi::-webkit-scrollbar { width:8px; }
.ulke-listesi::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius:99px; }

/* Satır: durum sol kenar şeridiyle anlatılır */
.ulke-satir {
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:0; border-left:3px solid var(--srenk, transparent);
  border-radius: 4px;
  padding: 9px 10px 9px 11px; text-align:left;
  transition: background var(--gecis);
}
.ulke-satir:hover, .ulke-satir.secili { background: var(--panel-ust); }

.ulke-satir .govde-alan { flex:1; min-width:0; }
.ulke-satir .ad { display:block; font-size:13.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ulke-satir .sure { font-size:11px; color:var(--metin-soluk); font-family:var(--baslik); white-space:nowrap; }

.bos-durum { text-align:center; color:var(--metin-soluk); padding: 40px 16px; font-size:13px; }
.bos-durum b { color:var(--metin); display:block; margin-bottom:4px; }

/* ── DETAY ───────────────────────────────────────────────── */
.detay {
  position:absolute; inset:0; z-index:5;
  background: var(--panel);
  display:flex; flex-direction:column;
  transform: translateX(102%);
  transition: transform 240ms cubic-bezier(.32,.72,.28,1);
}
.detay.acik { transform: translateX(0); }
.detay-ust { display:flex; align-items:center; padding: 12px 14px;
  border-bottom:1px solid var(--cizgi); flex-shrink:0; }
.geri {
  background:none; border:1px solid var(--cizgi); border-radius: 6px;
  color: var(--metin-soluk); font-size:12px; font-weight:700;
  padding: 6px 12px; transition: all var(--gecis);
}
.geri:hover { color: var(--pirinc); border-color: var(--pirinc); }
.detay-icerik { flex:1; overflow-y:auto; padding: 16px 14px; min-height:0; }
.detay-icerik::-webkit-scrollbar { width:8px; }
.detay-icerik::-webkit-scrollbar-thumb { background:var(--cizgi); border-radius:99px; }

.detay-kimlik { display:flex; align-items:flex-start; gap:12px; }

.detay-kimlik h3 { font-family:var(--baslik); font-size:21px; font-weight:600; line-height:1.15; }
.detay-kimlik .bolge-ad { font-size:11.5px; color:var(--metin-soluk); margin-top:2px; }

/* İmza öğe: pasaport damgası */
.damga {
  margin-left:auto; flex-shrink:0;
  transform: rotate(-4deg);
  border: 2px solid var(--drenk);
  outline: 1px solid var(--drenk);
  outline-offset: 2.5px;
  border-radius: 5px;
  color: var(--drenk);
  font-family: var(--baslik); font-weight:600;
  font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  padding: 7px 10px; text-align:center; line-height:1.25;
  opacity:.92;
}
.damga small { display:block; font-family:var(--govde); font-weight:700; font-size:8.5px; letter-spacing:.06em; opacity:.75; }

.detay-ozet {
  margin-top:14px; padding: 12px 14px;
  border:1px solid var(--cizgi); border-left:3px solid var(--drenk, var(--cizgi));
  border-radius: var(--r);
  background: var(--zemin); font-size: 13px;
}
.detay-ozet p { color: var(--metin-soluk); }
.detay-not { margin-top:9px; font-size:12px; color:var(--sari); display:flex; gap:7px; line-height:1.45; }

.detay-metrikler { display:flex; gap:8px; margin-top:10px; }
.metrik { flex:1; background:var(--zemin); border:1px solid var(--cizgi); border-radius:var(--r); padding: 10px 12px; }
.metrik .deger { font-family:var(--baslik); font-size:17px; font-weight:600; }
.metrik .ad { font-size:10.5px; color:var(--metin-soluk); }

.rehber-link {
  display:block; margin-top:14px; padding: 11px 14px;
  border:1px solid var(--cizgi); border-radius: var(--r);
  color: var(--pirinc); font-size:13px; font-weight:800; text-decoration:none;
  transition: border-color var(--gecis);
}
.rehber-link:hover { border-color: var(--pirinc); }

.detay h4 { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--metin-soluk); margin: 20px 0 8px; }
.liste-belge { display:flex; flex-direction:column; gap:5px; }
.belge {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--zemin); border:1px solid var(--cizgi); border-radius: 6px;
  padding: 9px 12px; font-size:12.5px; color:var(--metin);
  transition: all var(--gecis);
}
.belge .kutu {
  width:17px; height:17px; border-radius: 4px; flex-shrink:0;
  border:1.5px solid var(--metin-soluk);
  display:grid; place-items:center; font-size:10px; color:#FFFFFF;
  transition: all var(--gecis);
}
.belge.tik { color:var(--metin-soluk); text-decoration:line-through; }
.belge.tik .kutu { background:var(--yesil); border-color:var(--yesil); }
.belge-ilerleme { font-size:11.5px; color:var(--metin-soluk); margin-top:7px; }
.belge-ilerleme b { color: var(--yesil); }

.cta {
  display:block; margin-top:18px;
  background: var(--pirinc); color:#FFFFFF;
  border:0; border-radius: var(--r); padding: 13px;
  font-size:14px; font-weight:800; text-align:center; text-decoration:none;
  transition: filter var(--gecis);
}
.cta:hover { filter: brightness(1.1); }
.cta-pasif {
  margin-top:18px; padding: 12px 14px;
  border:1px dashed var(--cizgi); border-radius: var(--r);
  font-size:12px; color:var(--metin-soluk); text-align:center; line-height:1.5;
}

/* ── DUYARLILIK ──────────────────────────────────────────── */
@media (max-width: 1160px) {
  .uygulama { grid-template-columns: 210px minmax(0,1fr) 320px; }
}
@media (max-width: 980px) {
  body { overflow-x:hidden; overflow-y:auto; }
  .uygulama { display:flex; flex-direction:column; height:auto; padding:12px; gap:12px; }

  /* Stacked sıralama: harita → liste → istatistik/lejant → footer */
  .orta { order:1; }
  .sag  { order:2; }
  .sol  { order:3; }

  .sol { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; overflow:visible; }
  .sol-govde { display:contents; }
  .altbilgi { grid-column:1/-1; }
  .kimlik { grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:12px 14px; }
  .kimlik-bayrak { margin-bottom:0; width:44px; }
  .kimlik h1 { margin-top:0; font-size:15px; }
  .kimlik h1 br { display:none; }
  .ist-kutu { flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; }
  .lejant { grid-column:1/-1; }
  .lejant-satirlar { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }

  .harita-kap { height:56vh; min-height:300px; flex:none; }
  .trend { height:110px; }
  .sag { height:65vh; }
}

@media (max-width: 560px) {
  .uygulama { padding:10px; gap:10px; }
  .ustbar { padding:0 14px; }
  .logo { font-size:15px; }
  .ust-rozet { font-size:10.5px; }

  .sol { grid-template-columns:repeat(2,1fr); }
  .ist-kutu .deger { font-size:18px; }
  .lejant-satirlar { grid-template-columns:1fr; }

  .harita-kap { height:52vh; min-height:260px; }
  .zoom-butonlar button { width:34px; height:34px; }   /* parmak hedefi */
  .bolge-cip { padding:10px 8px; font-size:11.5px; }
  .ulke-satir { padding:11px 10px 11px 11px; }         /* dokunma alanı */
  .sag { height:68vh; }

  /* Footer: tam genişlik, ortalı */
  .altbilgi { align-items:center; text-align:center; }
  .altbilgi-metin { align-items:center; }

  .damga { font-size:10px; padding:6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}