:root {
  --bg: #070b14;
  --panel: #0e1524;
  --panel2: #131c30;
  --line: #223052;
  --text: #e8edf7;
  --muted: #8fa0bf;
  --accent: #4fc3f7;
  --green: #46d67c;
  --red: #ff6b6b;
  /* Display font: ağır/condensed/büyük harf (PORTAINER tarzı) — başlıklar & marka */
  --display: "Anton", "Archivo Black", Impact, "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Metin kopyalanamasın: her yerde seçim kapalı; iOS uzun-basış menüsü/vurgu yok */
* {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* Girdiler kullanılabilir kalsın (yazma/yapıştırma için seçim açık) */
input, textarea, [contenteditable] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
}
#globe { position: absolute; inset: 0; }

/* ---------- sol üst: katalog düğmesi ---------- */
#catalogBtn {
  position: absolute; top: 18px; left: 18px; z-index: 24;
  padding: 11px 18px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: rgba(14,21,36,.92);
  color: var(--text); font-family: var(--display); text-transform: uppercase;
  font-size: 15px; font-weight: 400; letter-spacing: 1px;
  backdrop-filter: blur(6px); transition: border-color .15s, color .15s;
}
#catalogBtn:hover { border-color: var(--accent); color: var(--accent); }

/* Sağ üst: görüntüleme para birimi seçici — özel dropdown (tema uyumlu) */
#curDrop { position: absolute; top: 18px; right: 18px; z-index: 24; }
#curBtn {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(14,21,36,.92); color: var(--text);
  backdrop-filter: blur(6px); transition: border-color .15s;
}
#curBtn:hover, #curDrop.open #curBtn { border-color: var(--accent); }
#curBtn .curLbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
}
#curBtn #curVal { font-family: var(--display); font-size: 16px; letter-spacing: .5px; }
#curBtn .curCaret {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted); transition: transform .15s;
}
#curDrop.open .curCaret { transform: rotate(180deg); }
#curMenu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 232px;
  max-height: 340px; overflow-y: auto; display: none;
  background: rgba(14,21,36,.98); border: 1px solid var(--line); border-radius: 12px;
  padding: 5px; backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
#curDrop.open #curMenu { display: block; }
.curItem {
  display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; color: var(--text);
}
.curItem:hover { background: var(--panel2); }
.curItem.active { background: rgba(79,195,247,.16); }
.curItem .code { font-weight: 800; font-size: 13px; min-width: 36px; letter-spacing: .3px; }
.curItem .nm { color: var(--muted); font-size: 12px; }
/* İnce kaydırma çubuğu */
#curMenu::-webkit-scrollbar { width: 8px; }
#curMenu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* ---------- üst orta: arama + istatistik HUD ---------- */
#topbar {
  position: absolute; top: 18px; left: 175px; right: 175px;
  /* Sol/sağ boşluk EŞİT (175px = Para birimi kutusunun gerçek genişliği + pay) ki
     içindeki yazı Katalog/Para birimi butonlarını es geçip TAM viewport ortasına
     otursun — asimetrik 150/18 önceki halde yazıyı sağa kaydırıyordu. */
  max-width: 760px; margin: 0 auto; z-index: 20;
}
#searchRow { display: flex; gap: 8px; }

/* İstatistik HUD kartı (ürün yüklenince) — kompakt */
#statsHud { display: none; margin-top: 8px; }
#statsHud.show { display: block; }
#statsHud .stHead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 6px;
}
#statsHud .stName {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .4px;
  font-size: 17px; font-weight: 400; color: var(--text); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#statsHud .stMeta { font-size: 11px; color: var(--muted); white-space: nowrap; }
#statsHud .stTiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#statsHud .stTile {
  background: rgba(14,21,36,.92); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 10px; backdrop-filter: blur(6px); min-width: 0;
}
#statsHud .stLabel {
  font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
#statsHud .stMain { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#statsHud .stSub { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#statsHud .t-cheap .stMain { color: var(--green); }
#statsHud .t-ppp .stMain { color: var(--accent); }
#statsHud .stHint { text-align: center; font-size: 10.5px; color: var(--muted); opacity: .65; margin-top: 7px; text-shadow: 0 1px 4px #000; }

/* Ülke kodu rozeti (bayrak emojisi yerine — her platformda tutarlı) */
.ccb {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.1);
  color: var(--text); vertical-align: 1px;
}

/* Küre ipucu — en altta, orta (ürün yüklüyken) */
#globeHint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 19; display: none; pointer-events: none; text-align: center;
  font-size: 11.5px; color: var(--muted); text-shadow: 0 1px 6px #000; max-width: 90vw;
}
#globeHint.show { display: block; }
#searchInput {
  flex: 1; padding: 13px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(14,21,36,.92);
  color: var(--text); font-size: 15px; outline: none;
  backdrop-filter: blur(6px);
}
#searchInput:focus { border-color: var(--accent); }
#searchBtn {
  padding: 13px 22px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--accent); color: #04121c; font-weight: 700; font-size: 15px;
}
#searchBtn:disabled { opacity: .5; cursor: wait; }
#suggestions {
  margin-top: 6px; background: rgba(14,21,36,.96); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; display: none; backdrop-filter: blur(6px);
}
.sug {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  cursor: pointer; border-bottom: 1px solid rgba(34,48,82,.5);
}
.sug:last-child { border-bottom: none; }
.sug:hover { background: var(--panel2); }
.sug img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: #fff; }
.sug .nm { font-size: 14px; }
.sug .meta { font-size: 12px; color: var(--muted); }

#status {
  margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted);
  text-shadow: 0 1px 4px #000;
}
#status b { color: var(--accent); }

/* ---------- sol alt bilgi ---------- */
#legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 20;
  background: rgba(14,21,36,.85); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--muted);
  backdrop-filter: blur(6px);
  width: 250px;                 /* SABİT genişlik — moda göre değişmesin */
  font-family: var(--display);  /* istenen display font (Anton) */
  letter-spacing: .3px;
}
#legendTitle { height: 2.9em; line-height: 1.3; overflow: hidden; }   /* 2 satırlık SABİT yer — yükseklik değişmesin */
#legend .bar {
  height: 8px; border-radius: 4px; margin: 8px 0 4px;
  background: linear-gradient(90deg, #46d67c, #f7d354, #ff6b6b);
}
#legend .lr { display: flex; justify-content: space-between; }
#legend .gray { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: #3a4358; margin-right: 6px; vertical-align: -1px; }

/* Görünüm seçici — üç seçenekli segmented kontrol (lejant içinde):
   Nominal / Satın alma gücü / Liste (küreyi kapatıp performans kazandırır) */
#viewToggle {
  display: none; gap: 3px; margin-bottom: 10px; padding: 3px;   /* ürün yüklenince JS flex yapar */
  background: rgba(8,13,24,.6); border: 1px solid var(--line); border-radius: 10px;
}
#viewToggle .vtOpt {
  flex: 1; padding: 6px 8px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700;
  white-space: nowrap; transition: background .15s, color .15s;
}
#viewToggle .vtOpt:hover { color: var(--text); }
#viewToggle .vtOpt.active { background: var(--accent); color: #04121c; }
/* Masaüstünde tam etiket, dar ekranda kısa etiket (3 buton sığsın diye) */
#viewToggle .vtShort { display: none; }
@media (max-width: 640px) {
  #viewToggle .vtFull { display: none; }
  #viewToggle .vtShort { display: inline; }
}
/* Tam etiketler (Nominal fiyat / Satın alma gücü / Liste görünümü) 250px'lik
   sabit lejant genişliğine sığmıyor, "Liste görünümü" kutunun dışına taşıyordu.
   Kısa etiketler (Nominal/Güç/Liste) 250px'e zaten sığıyor — sadece tam
   etiketlerin göründüğü genişlikte (>640px) kutuyu genişlet. */
@media (min-width: 641px) {
  #legend { width: 350px; }
}
/* Liste modundayken renk skalası (bar/lo-hi/gri açıklama) anlamsız —
   yalnızca segmented control görünür kalır, alt bilgi gizlenir. */
#legend.list-mode #legendColorInfo { display: none; }

/* Fiyat Küresi Endeksi manşeti — katalog başlığında */
#globeIndex { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
#globeIndex:empty { display: none; }
#globeIndex .giItem {
  font-size: 12.5px; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
#globeIndex .giItem b { color: var(--text); font-weight: 700; }
#globeIndex .giLabel { text-transform: uppercase; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; color: var(--muted); margin-right: 3px; }
#globeIndex .giExtra { color: var(--muted); font-weight: 400; margin-left: 7px; font-size: 11.5px; }
#globeIndex .gi-cheap { border-color: rgba(70,214,124,.4); }
#globeIndex .gi-cheap b { color: var(--green); }
#globeIndex .gi-exp { border-color: rgba(255,107,107,.4); }
#globeIndex .gi-exp b { color: var(--red); }
#globeIndex .gi-win b { color: var(--accent); }
#globeIndex .giMeta { font-size: 11.5px; color: var(--muted); opacity: .7; }

/* ---------- reklam slotları ---------- */
.adSlot { position: fixed; z-index: 15; display: none; }
/* geniş ekran: iki dikey yan slot, dikey ortalı */
.adSide {
  top: 50%; transform: translateY(-50%);
  width: 160px; min-height: 600px;
}
#adLeft { left: 14px; }
#adRight { right: 14px; }
/* dar ekran: tek yatay alt slot */
.adBottom {
  left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(728px, 96vw); height: 60px;
}
@media (min-width: 1280px) { .adSide { display: block; } }
@media (max-width: 1279px) {
  .adBottom { display: block; }
  /* alt reklam banner'ı lejantı örtmesin: lejantı bunun üstüne al */
  #legend { bottom: 80px; }
}

/* placeholder görünümü (AdSense ID girilene kadar) */
.adPlaceholder {
  width: 100%; height: 100%; min-height: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(14,21,36,.55); backdrop-filter: blur(4px);
  color: var(--muted); font-size: 12px; padding: 10px;
}
.adPlaceholder b { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.adPlaceholder span { font-size: 10.5px; opacity: .7; }

/* ---------- katalog paneli ---------- */
#catalogPanel {
  position: absolute; inset: 0; z-index: 25; display: none;
  flex-direction: column; padding: 22px clamp(14px, 4vw, 48px) 0;
  background: rgba(4,7,14,.9); backdrop-filter: blur(9px);
  animation: fade .3s ease;
}
#catalogPanel.open { display: flex; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

#catalogHead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; max-width: 1200px; width: 100%; margin: 0 auto 14px;
}
#catalogHead h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 34px); font-weight: 400; letter-spacing: .5px; line-height: 1;
}
#catalogHead h1 span { color: var(--accent); }
#catalogSub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
#catalogClose {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px;
}
#catalogClose:hover { border-color: var(--accent); color: var(--accent); }

#catalogControls {
  max-width: 1200px; width: 100%; margin: 0 auto 16px;
  display: flex; flex-direction: column; gap: 12px;
}
#catalogSearch {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 14.5px; outline: none;
}
#catalogSearch:focus { border-color: var(--accent); }
/* Kategori çipleri: tek satır, kesintisiz kayan slider (aynı sabit hızda —
   kategori sayısı değişse de px/sn hızı hep aynı, app.js'te hesaplanır).
   Kenarlar yumuşak kaybolur (mask); üstüne gelince/dokununca durur ki
   kayarken de tıklanabilsin. */
#chipsViewport {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
#catalogChips {
  display: flex; flex-wrap: nowrap; gap: 6px; width: max-content;
  animation: chipsMarquee var(--marqueeDur, 25s) linear infinite;
}
#chipsViewport:hover #catalogChips, #chipsViewport.paused #catalogChips { animation-play-state: paused; }
@keyframes chipsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  white-space: nowrap; transition: .15s; flex-shrink: 0;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.active { background: var(--accent); color: #04121c; border-color: var(--accent); font-weight: 700; }
.chip .n { opacity: .5; margin-left: 5px; font-size: 10.5px; font-variant-numeric: tabular-nums; }

#catalogGrid {
  max-width: 1200px; width: 100%; margin: 0 auto; padding-bottom: 28px;
  overflow-y: auto; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 1fr;   /* aynı satırdaki tüm kartlar EŞİT yükseklikte (açıklaması
                            olmayan ürünler kısa kalmasın) */
  align-items: stretch;
}
#catalogGrid::-webkit-scrollbar { width: 9px; }
#catalogGrid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; cursor: pointer; transition: .15s; position: relative;
  display: flex; flex-direction: column; gap: 9px;
}
/* Çocuklar küçülmesin: aksi halde flex container gerçek yüksekliğini
   bildirmiyor, grid satırı min-height'a (118px) sıkışıp içerik kesiliyor
   (görsel eklenince ortaya çıktı — kart 178px içeriği 118px'e sığmıyordu). */
.card > * { flex-shrink: 0; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--panel2); }
.card.pending { cursor: default; opacity: .62; }
.card.pending:hover { transform: none; border-color: var(--line); background: var(--panel); }
.card .cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.card .name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.card .foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card .cheap { font-size: 13px; }
.card .cheap b { color: var(--green); font-weight: 700; }
.card .cheap .cc { color: var(--muted); font-size: 12px; }
.card .cnt { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.card .soon { font-size: 12px; color: var(--muted); font-style: italic; }
/* Ürün görseli: şeffaf PNG'ler için açık zemin (Google küçük resimleri beyaz fonlu) */
.card .thumb {
  height: 96px; flex-shrink: 0;   /* grid hücresi sıkıştırınca 0'a çökmesin */
  border-radius: 10px; overflow: hidden; background: #f4f6fb;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1px;
}
.card .thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
/* Sade "bu nedir" açıklaması */
.card .pdesc { font-size: 12px; color: var(--text); opacity: .72; line-height: 1.2; margin-top: -4px; }
.card .tier {
  position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%;
}
.tier-hot { background: var(--red); }
.tier-warm { background: #f7d354; }
.tier-cold { background: #5a6b8c; }

#catalogEmpty { display: none; text-align: center; color: var(--muted); padding: 40px; }
#catalogEmpty.show { display: block; }

@media (max-width: 560px) {
  #catalogGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* --- üst düğmeleri küçült --- */
  #catalogBtn { top: 12px; left: 12px; padding: 8px 12px; font-size: 12px; letter-spacing: .5px; border-radius: 10px; }
  #curDrop { top: 12px; right: 12px; }
  #curBtn { padding: 6px 10px; gap: 6px; border-radius: 10px; }
  #curBtn .curLbl { font-size: 8px; }
  #curBtn #curVal { font-size: 14px; }

  /* --- HUD: düğmelerin altına, kompakt --- */
  #topbar { top: 54px; left: 10px; right: 10px; max-width: none; }
  #statsHud { margin-top: 6px; }
  #statsHud .stHead { flex-direction: row; align-items: baseline; gap: 8px; padding: 0 2px 5px; }
  #statsHud .stName { font-size: 15px; }
  #statsHud .stMeta { font-size: 10px; }
  /* İstatistik tile'ları: dikey yığıp ekranı yemesin — TEK SATIR yatay
     kaydırmalı strip (kartlar yan yana, parmakla kaydırılır). */
  #statsHud .stTiles {
    display: flex; grid-template-columns: none; gap: 7px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  #statsHud .stTiles::-webkit-scrollbar { display: none; }
  #statsHud .stTile { flex: 0 0 46%; scroll-snap-align: start; padding: 7px 10px; }
  #statsHud .stLabel { font-size: 8.5px; }
  #statsHud .stMain { font-size: 12.5px; }
  #statsHud .stSub { font-size: 10px; }

  /* --- lejant: kompakt, en alttaki bilgilendirme notunun ÜSTÜNDE dursun
     (12px'te notun ilk satırını örtüyordu — 34px'e alındı, not artık görünür) --- */
  #legend {
    left: 12px; bottom: 34px; width: auto;
    max-width: min(240px, calc(100vw - 24px)); padding: 9px 12px; font-size: 11px;
  }
  #legendTitle { height: auto; line-height: 1.25; margin-bottom: 2px; }
  #viewToggle { margin-bottom: 8px; }
  #viewToggle .vtOpt { padding: 5px 6px; font-size: 10.5px; }
  #legend .bar { height: 6px; margin: 6px 0 3px; }
}

/* ---------- ülke paneli ---------- */
#countryPanel {
  position: absolute; inset: 0; z-index: 30; display: none;
  background: rgba(4,7,14,.82); backdrop-filter: blur(8px);
}
#countryPanel.open { display: flex; }
#panelInner {
  margin: auto; width: min(1060px, 94vw); height: min(640px, 88vh);
  display: flex; gap: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  animation: pop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#panelLeft {
  flex: 0 0 42%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #16223c 0%, var(--panel) 70%);
  border-right: 1px solid var(--line);
}
#countrySvg { width: 100%; max-height: 380px; }
#countrySvg path {
  fill: rgba(79,195,247,.12); stroke: var(--accent); stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(79,195,247,.45));
}
#countryName { font-family: var(--display); text-transform: uppercase; font-size: 24px; font-weight: 400; letter-spacing: .6px; }
#countryName .ccb { vertical-align: 3px; }
#countryFlagSub { color: var(--muted); font-size: 13px; }

#panelRight { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#panelHead {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  border-bottom: 1px solid var(--line); background: var(--panel2);
}
#panelHead img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; }
#panelTitle { font-size: 16px; font-weight: 700; }
#panelSub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#closeBtn {
  margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; width: 36px; height: 36px; font-size: 17px; cursor: pointer;
}
#closeBtn:hover { color: var(--text); border-color: var(--accent); }

#priceList { overflow-y: auto; overflow-x: hidden; padding: 14px 18px; flex: 1; }  /* slideIn translateX kaydırma çubuğu titretmesin */
.priceRow {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  background: rgba(19,28,48,.6);
  animation: slideIn .4s both;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.rank {
  flex: 0 0 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
}
.priceRow.best .rank { background: rgba(70,214,124,.15); border-color: var(--green); color: var(--green); }
.store { min-width: 0; flex: 1; }
.store .sn { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store .sc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.badge {
  display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 8px;
  background: rgba(255,107,107,.15); color: var(--red); margin-left: 6px; vertical-align: 1px;
}
.prices { text-align: right; flex-shrink: 0; }
.p-local { font-size: 17px; font-weight: 700; color: var(--green); }
.priceRow.best .p-local { text-shadow: 0 0 12px rgba(70,214,124,.5); }
.p-conv { font-size: 12px; color: var(--muted); margin-top: 3px; }
.p-conv span { margin-left: 10px; }

#toast {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 40; background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  padding: 11px 20px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none;
  transition: all .3s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spin {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted);
  border-top-color: var(--accent); border-radius: 50%; vertical-align: -2px;
  animation: rot .8s linear infinite; margin-right: 6px;
}
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- v2: hibrit kaynak rozetleri + tıklanabilir satırlar ---------- */
.priceRow.clickable { cursor: pointer; transition: border-color .15s, transform .15s; }
.priceRow.clickable:hover { border-color: var(--accent); transform: translateX(-3px); }
.linkIcon { margin-left: 7px; color: var(--accent); font-size: 13px; }
.srcTag {
  display: inline-block; font-size: 10.5px; padding: 1px 8px; border-radius: 8px;
  margin-right: 8px; vertical-align: 1px;
}
.src-op { background: rgba(70,214,124,.13); color: var(--green); }
.src-web { background: rgba(79,195,247,.13); color: var(--accent); }
.sugWeb { background: rgba(79,195,247,.06); }
.webIco {
  width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: var(--panel2); flex-shrink: 0;
}

/* =====================================================================
   YAPAY ZEKA ASİSTANI — sohbet balonu + panel
   ===================================================================== */
/* KRİTİK: aşağıdaki display:flex/inline-flex, HTML [hidden] özniteliğinin
   display:none'ını ezer. Bu kural (id+öznitelik = daha yüksek özgüllük)
   [hidden] iken gizlemeyi geri kazandırır — yoksa panel hep görünür kalıp
   "Sor" butonuyla balonun tıklamalarını yutar (kapat/aç çalışmaz). */
#askLauncher[hidden], #askPanel[hidden] { display: none !important; }

#askLauncher {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 24px; cursor: pointer;
  background: rgba(14,21,36,.94); border: 1px solid var(--line);
  color: var(--text); font-family: var(--display); text-transform: uppercase;
  letter-spacing: .5px; font-size: 14px; backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.4); transition: border-color .15s, transform .15s;
}
#askLauncher:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
#askLauncher .askDot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); flex-shrink: 0;
}

#askPanel {
  position: fixed; right: 18px; bottom: 18px; z-index: 61;
  width: 380px; max-width: calc(100vw - 36px);
  height: 560px; max-height: calc(100vh - 36px);
  display: flex; flex-direction: column;
  background: rgba(10,15,26,.98); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px);
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
}
#askHead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
#askTitle { font-family: var(--display); text-transform: uppercase; letter-spacing: .4px; font-size: 15px; color: var(--text); }
#askProduct { font-size: 12px; color: var(--accent); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
#askClose {
  background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer;
  line-height: 1; padding: 4px; border-radius: 6px; flex-shrink: 0;
}
#askClose:hover { color: var(--text); background: var(--panel2); }

#askBody { flex: 1; overflow-y: auto; padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 10px; }
#askBody::-webkit-scrollbar { width: 8px; }
#askBody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.askMsg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.askMsg.user { align-self: flex-end; background: var(--accent); color: #06121c; border-bottom-right-radius: 4px; font-weight: 600; }
.askMsg.bot { align-self: flex-start; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.askMsg.err { align-self: flex-start; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.4); color: var(--red); }
.askMsg.bot.typing { color: var(--muted); font-style: italic; }
.askMsg.bot.typing::after { content: "…"; animation: askDots 1.2s steps(4) infinite; }
@keyframes askDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.askIntro { color: var(--muted); font-size: 12.5px; line-height: 1.55; text-align: center; padding: 8px 6px; }
.askMethodNote { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 11px; opacity: .8; }

#askExamples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.askChip {
  font-size: 11.5px; padding: 6px 10px; border-radius: 14px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  transition: border-color .15s, color .15s;
}
.askChip:hover { border-color: var(--accent); color: var(--accent); }

#askForm { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--panel); }
#askInput {
  flex: 1; resize: none; max-height: 120px; padding: 9px 11px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 13.5px; line-height: 1.4; outline: none;
  overflow-y: auto; scrollbar-width: none;   /* Firefox: çubuğu gizle */
}
/* Chrome/Edge: input yanındaki çubuk + ok tuşlarını tamamen kaldır */
#askInput::-webkit-scrollbar { width: 0; height: 0; display: none; }
#askInput::-webkit-scrollbar-button { display: none; }
#askInput:focus { border-color: var(--accent); }
#askSend {
  padding: 0 16px; border-radius: 10px; cursor: pointer; flex-shrink: 0;
  background: var(--accent); border: none; color: #06121c;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; font-size: 13px;
}
#askSend:disabled { opacity: .5; cursor: default; }

@media (max-width: 520px) {
  /* Tam ekran DEĞİL — kenar boşluklu, yuvarlak köşeli açılır pencere.
     Üstte küre görünür kalır → kullanıcı "çıkışta" olduğunu hisseder,
     ✕ ve dışına dokunma ile kapanır. */
  #askPanel {
    left: 10px; right: 10px; bottom: 10px; top: auto;
    width: auto; max-width: none;
    height: 72vh; max-height: 78vh;
    border-radius: 16px;
    box-shadow: 0 14px 50px rgba(0,0,0,.6);
  }
  /* ✕ kapatma düğmesini mobilde belirginleştir (kolay basılsın) */
  #askClose { font-size: 22px; padding: 6px 8px; }
}

/* =====================================================================
   GEÇİŞ EKRANI + HATA EKRANI — dönen dünya + FK monogramı
   ===================================================================== */
.fkOverlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center; padding: 24px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20,32,58,.9), rgba(4,7,14,.98) 62%),
    var(--bg);
  opacity: 1; transition: opacity .5s ease;
}
.fkOverlay.fkOut { opacity: 0; pointer-events: none; }
/* [hidden] display:none, .fkOverlay display:flex'i ezmeli (özgüllük + !important) */
.fkOverlay[hidden] { display: none !important; }

/* --- logo: perspektifli sahne, ortada FK --- */
.fkLogo {
  position: relative; width: 168px; height: 168px;
  display: flex; align-items: center; justify-content: center;
  perspective: 620px;
}
.fkGlobe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: fkSpin 6.5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(79,195,247,.35));
}
.fkGlobe .fkWire > * {
  fill: none; stroke: rgba(79,195,247,.5); stroke-width: 1.25; vector-effect: non-scaling-stroke;
}
.fkGlobe .fkWire circle { stroke: rgba(79,195,247,.8); stroke-width: 1.6; }
/* Y ekseninde dönen tel = dönen gezegen illüzyonu */
@keyframes fkSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* yörünge halkası (yükleniyor hissi) */
.fkOrbit {
  position: absolute; inset: -16px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent);
  border-right-color: rgba(79,195,247,.35);
  animation: fkOrbit 1.15s linear infinite;
}
@keyframes fkOrbit { to { transform: rotate(360deg); } }

/* FK monogramı — Anton, degrade + parıltı, nazik nabız */
.fkMono {
  position: relative; z-index: 2; font-family: var(--display);
  font-size: 58px; letter-spacing: 3px; line-height: 1;
  background: linear-gradient(180deg, #eaf6ff 0%, #7fd3f9 55%, #2aa7e0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(79,195,247,.45);
  animation: fkPulse 2.2s ease-in-out infinite;
}
@keyframes fkPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.18); } }

.fkTagline {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 6px;
  font-size: 26px; color: var(--text);
}
.fkSub { color: var(--muted); font-size: 13px; letter-spacing: .5px; min-height: 1em; }

/* --- hata ekranı varyantı --- */
.fkLogo.err .fkGlobe { animation-duration: 12s; filter: drop-shadow(0 0 10px rgba(255,107,107,.35)); }
.fkLogo.err .fkGlobe .fkWire > * { stroke: rgba(255,107,107,.45); }
.fkLogo.err .fkGlobe .fkWire circle { stroke: rgba(255,107,107,.8); }
.fkLogo.err .fkMono {
  background: linear-gradient(180deg, #ffe3e3 0%, #ff9d9d 55%, #ff6b6b 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 22px rgba(255,107,107,.4); animation: none;
}
.fkErrTitle { font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 24px; color: var(--text); }
.fkErrMsg { color: var(--muted); font-size: 14px; max-width: 380px; line-height: 1.55; }
.fkErrBtns { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.fkErrBtns button {
  padding: 11px 20px; border-radius: 24px; cursor: pointer;
  background: var(--accent); border: none; color: #06121c;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .6px; font-size: 14px;
  transition: transform .15s, filter .15s;
}
.fkErrBtns button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fkErrBtns button.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--text);
}
.fkErrBtns button.ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 520px) {
  .fkLogo { width: 132px; height: 132px; }
  .fkMono { font-size: 46px; }
  .fkTagline { font-size: 20px; letter-spacing: 4px; }
}

/* --- Geçiş ekranı: fade yerine SAĞDAN SOLA hızlı kayma (sayfa wipe) ---
   CSS keyframe animasyonu (transition+reflow bazı tarayıcılarda tetiklenmiyordu). */
#fkTransition { transform: translateX(0); opacity: 1 !important; will-change: transform; }
#fkTransition.fkIn  { animation: fkSlideIn  .4s cubic-bezier(.65,0,.35,1) both; }  /* sağdan içeri */
#fkTransition.fkOut { animation: fkSlideOut .4s cubic-bezier(.65,0,.35,1) both; }  /* sola doğru çık */
@keyframes fkSlideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fkSlideOut { from { transform: translateX(0); }    to { transform: translateX(-100%); } }

/* =====================================================================
   MOBİL UYUM — dar ekran düzeltmeleri
   ===================================================================== */
/* Tam-ekran katman (katalog/ülke paneli) açıkken sohbet balonu üstte kalmasın */
#catalogPanel.open ~ #askLauncher,
#countryPanel.open ~ #askLauncher { display: none !important; }

@media (max-width: 640px) {
  /* Ülke paneli: yan yana yerine DİKEY yığ → fiyat taşması + yatay kaydırma biter */
  #panelInner {
    flex-direction: column; width: 100vw; height: 100vh;
    max-width: 100vw; max-height: 100vh; border-radius: 0; border: none;
  }
  #panelLeft {
    flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: 4px 14px; padding: 13px 16px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  #countrySvg { width: 66px; height: 66px; max-height: 66px; flex: 0 0 auto; }
  #countryName { font-size: 20px; }
  #countryFlagSub { flex-basis: 100%; font-size: 12px; }
  #panelRight { flex: 1 1 auto; min-height: 0; }
  #panelHead { padding: 13px 16px; }
  #priceList { padding: 12px 14px; }
  .priceRow { gap: 10px; padding: 11px 12px; }
  .prices { min-width: 0; }
  .p-conv { white-space: normal; }        /* USD ikincil satır sığmazsa sarsın */
  .p-conv span { margin-left: 6px; }

  /* Alt kalabalığı azalt: küre ipucunu gizle (.show'u ezmek için !important) */
  #globeHint { display: none !important; }
}

/* =====================================================================
   YASAL/BİLGİLENDİRME NOTU — göze çarpmasın, ama her sayfada dursun.
   Çok soluk, çok küçük punto; diğer arayüz öğeleriyle çakışmaz (düşük
   z-index + dar alan + pointer-events kapalı, tıklamaları engellemez).
   ===================================================================== */
#disclaimer {
  position: fixed; left: 0; right: 0; bottom: 2px; z-index: 5;
  text-align: center; pointer-events: none; user-select: none;
  font-size: 9px; line-height: 1.3; color: rgba(143,160,191,.38);
  padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  #disclaimer { white-space: normal; font-size: 8.5px; bottom: 1px; }
}

/* Asistan balonu (mobil): alt kenarı SOLDAKİ lejant kutusuyla aynı çizgide
   dursun. Lejant mobilde bottom:34px'e alınmıştı (bilgilendirme notunu
   örtmesin diye); buton 18px'de kalınca ikisi hizasız duruyordu. Dosyanın
   en sonunda tanımlanıyor ki #askLauncher'ın asıl kuralını kesin ezsin
   (CSS'te aynı özgüllükte SONRAKİ kaynak kazanır). */
@media (max-width: 560px) {
  #askLauncher { bottom: 34px; }
}

/* =====================================================================
   ÜLKE LİSTESİ GÖRÜNÜMÜ — küre kapalıyken (performans modu)
   Aynı byCountry verisini kullanır, WebGL render'ı tamamen durur
   (world.pauseAnimation()) — düşük güçlü cihazlarda/pilde daha hafif.
   ===================================================================== */
#countryListView {
  /* top/bottom PADDING değil, kutunun kendi sınırı (inset) — aksi halde
     scroll sırasında satırlar sabit duran HUD/lejantın ALTINDAN geçip
     onunla çakışıyordu (padding sadece en baştaki/sondaki satırı korur). */
  position: absolute; top: 150px; left: 0; right: 0; bottom: 210px; z-index: 2; overflow-y: auto;
  padding: 0 18px;
  display: flex; justify-content: center;
}
#countryListView[hidden] { display: none !important; }   /* [hidden] her zaman kazansın */
#countryListEmpty {
  margin: auto; color: var(--muted); font-size: 14px; text-align: center;
}
#countryListRows {
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 8px;
}
.clRow {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(14,21,36,.75);
  backdrop-filter: blur(6px); cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.clRow:hover { border-color: var(--accent); background: var(--panel2); transform: translateX(3px); }
.clRow.best { border-color: rgba(70,214,124,.5); }
.clRow .clRank {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line);
}
.clRow.best .clRank { background: rgba(70,214,124,.15); border-color: var(--green); color: var(--green); }
.clRow .clName { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clRow .clPrice { flex: 0 0 auto; text-align: right; font-size: 14.5px; font-weight: 700; color: var(--green); }
.clRow .clSub { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }

@media (max-width: 560px) {
  #countryListView { top: 128px; bottom: 170px; padding: 0 10px; }
  .clRow { padding: 9px 12px; gap: 9px; }
  .clRow .clName { font-size: 13px; }
  .clRow .clPrice { font-size: 13px; }
}