/* ==========================================================================
   RAPORON — Müşteri Raporu (statik tasarım taslağı v3)
   Palet   : Agendrix'ten türetildi — koyu teal + şeftali + sıcak beyaz
   Hareket : Apple "Designing Fluid Interfaces" ilkeleri
             · basış anında tepki   · 1:1 takip
             · hız devri            · momentum projeksiyonu
             · lastik sınır         · her an kesintiye uğratılabilir yay
   Ölçü    : tipografi rem tabanlı — kullanıcının yazı boyutu ayarına uyar
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- Marka: teal ailesi --- */
  --t-900:#05373c; --t-700:#0b545c; --t-500:#0f6973; --t-400:#488c92;
  --t-300:#80aeb1; --t-200:#bbd3d3; --t-100:#dae7e7; --t-50:#e5f0f0; --t-25:#f2f8f8;

  /* --- Vurgu: şeftali --- */
  --p-600:#ec917d; --p-500:#f5a08c; --p-100:#fce3dd; --p-50:#fef6f4;

  /* --- "ON" yeşili --- */
  --on:#14a08b; --on-50:#e6f5f2;

  /* Google Reklamları: paleti bozmayan sıcak bronz */
  --gads:#a9762f; --gads-50:#f8f0e2;

  /* --- Alt menü göstergesi: her bölüm kendi renginde ---
     Bölüm renkleri açık tonlar (şeftali #f5a08c gibi) ve beyaz yazıyla
     okunmuyor. Bu yüzden aynı rengin koyu tonu kullanılıyor: kimlik aynı,
     kontrast beyaz yazı için 6:1 üzerinde. */
  --nav-ozet:#05373c;   /* koyu teal   — 13.0:1 */
  --nav-ig:#9e4a33;     /* koyu şeftali —  6.0:1 */
  --nav-ads:#0f6973;    /* marka teal  —  6.4:1 */
  --nav-gads:#8a5a28;   /* koyu bronz  —  5.9:1 */
  --nav-web:#0c6f60;    /* koyu ON     —  6.1:1 */

  /* --- Yüzeyler --- */
  --bg:#f4f1ef; --card:#ffffff; --card-2:#faf8f7;
  --line:#e9e4e1; --line-soft:#f0ecea;

  /* --- Metin --- */
  --ink:#12232a; --ink-2:#3d5157; --muted:#54666b; --muted-2:#5f7176;

  /* --- Durum --- */
  --good:#0e7d63; --good-bg:#e3f2ee;
  --bad:#c85c42;  --bad-bg:#fbeae4;
  --flat:#7b8c90; --flat-bg:#efeceb;

  --r-xl:1.55rem; --r-lg:1.2rem; --r-md:1rem;
  --shadow:0 1px 2px rgba(5,55,60,.03), 0 10px 30px -16px rgba(5,55,60,.18);
  --shadow-lift:0 2px 4px rgba(5,55,60,.04), 0 18px 40px -20px rgba(5,55,60,.28);
  --shadow-sheet:0 -2px 8px rgba(5,55,60,.06), 0 -24px 60px -24px rgba(5,55,60,.45);
  --wrap:35rem;
}


/* NOT — gri tonlar:
   Eski değerler (#7b8c90 / #a3b0b3) sayfa zemininde 3.1 ve 2.0 kontrast
   veriyordu; okunabilirlik eşiği 4.5 — yani ikisi de kalıyordu.
   Aynı ton ailesinde koyultuldu: muted 5.35, muted-2 4.54.
   Aralarındaki fark korundu ki hiyerarşi kaybolmasın. */
*{box-sizing:border-box}
/* Kök yazı boyutu %6 büyütüldü.
   Tüm ölçüler (yazı, dolgu, köşe, genişlik) rem cinsinden olduğu için
   tasarım oranları bozulmadan hepsi birlikte büyüyor — tek tek değer
   değiştirseydik hizalar kayardı. Kullanıcının tarayıcı ayarı da
   üstüne çarpılmaya devam ediyor. */
html{-webkit-text-size-adjust:100%; font-size:112%}       /* §15 kullanıcı ayarına saygı; bir tık büyük taban */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:.9375rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.03em}

/* #app'e ASLA transform uygulanmıyor.
   Dönüşüm uygulanan bir element, içindeki position:fixed öğeler için yeni bir
   referans noktası yaratır — sabit menü ekrana değil sayfaya yapışır.
   Ayrıca uzun bir sayfayı ölçeklemek, dönüşüm merkezi sayfanın tepesinde
   olduğu için aşağıdayken içeriği yüzlerce piksel kaydırır. Bu yüzden alt
   panel açılırken sayfayı geri itme efektini bıraktım; odaklama işini
   karartma katmanı yapıyor (§12). */
#app{background:var(--bg); min-height:100vh}

/* ==========================================================================
   LOGO
   ========================================================================== */
.logo{display:inline-flex; align-items:center; gap:.34em; font-size:1.19rem; line-height:1; user-select:none}
.logo .word{font-weight:800; letter-spacing:-.025em; color:var(--t-900)}
.logo .sw{display:inline-flex; align-items:center; gap:.34em; background:var(--on); border-radius:999px; padding:.24em .24em .24em .55em}
.logo .sw b{font-size:.82em; font-weight:800; letter-spacing:.02em; color:#fff}
.logo .sw i{width:.9em; height:.9em; border-radius:50%; background:#fff; display:block; box-shadow:0 1px 2px rgba(0,0,0,.14)}
.logo.on-dark .word{color:#fff}
.logo.sm{font-size:.94rem}

/* ==========================================================================
   SAYFA İSKELETİ
   ========================================================================== */
/* Alt boşluk yüzen menünün altında kalmayacak kadar */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.125rem 7rem}
/* Menüye tıklanınca bölüm biraz aşağıda dursun */
.section{scroll-margin-top:1.1rem}

/* ==========================================================================
   YÜZEN ALT MENÜ — mobilde ve masaüstünde aynı
   Kenarlardan boşluklu, tam oval, yarı saydam malzeme.
   ========================================================================== */
.tabbar{
  position:fixed; z-index:55;
  left:max(.85rem, env(safe-area-inset-left));
  right:max(.85rem, env(safe-area-inset-right));
  bottom:calc(.85rem + env(safe-area-inset-bottom));
  max-width:25rem; margin:0 auto;
  padding:.3rem;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  /* §12 üstte parlak kenar = malzemeye çarpan ışık */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 1px 2px rgba(5,55,60,.05),
    0 14px 34px -12px rgba(5,55,60,.38);
  will-change:transform, opacity;
}
.tabbar-track{position:relative; display:flex; align-items:stretch}
/* Kayan gösterge — konumu yayla, rengi geçişle sürülüyor.
   Renk jest bağımlı değil, o yüzden CSS geçişi yeterli; süresi yayınkiyle
   aynı ki kayma bitince renk de yerine oturmuş olsun. */
.tabbar-ind{
  position:absolute; top:0; bottom:0; left:0; width:25%;
  border-radius:999px;
  background:var(--ind, var(--nav-ozet));
  transition:background-color .38s cubic-bezier(.32,.72,0,1);
  will-change:transform; pointer-events:none;
}
.tabbar a{
  position:relative; z-index:1; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.17rem;
  padding:.52rem .2rem .46rem;
  text-decoration:none; border-radius:999px;
  /* §12 vibrancy: saydam yüzey üstünde metin daha kalın ve kontrastlı */
  color:var(--t-700); font-size:.63rem; font-weight:700; letter-spacing:.002em;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:color .28s ease, transform .11s cubic-bezier(.2,.7,.3,1);
}
.tabbar a svg{
  width:1.06rem; height:1.06rem; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.tabbar a.on{color:#fff}
.tabbar a.pressed{transform:scale(.93)}
/* Özet bölümündeyken hiçbir sekme seçili değil: gösterge kaybolur */
.tabbar.bos .tabbar-ind{opacity:0}
.tabbar-ind{transition:background-color .38s cubic-bezier(.32,.72,0,1), opacity .25s ease}
.tabbar a:focus-visible{outline:2px solid var(--t-400); outline-offset:2px}
@media (max-width:20rem){ .tabbar a{font-size:.58rem} }

/* ---------- Kapak ---------- */
.cover{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(115% 80% at 88% 4%, #10606b 0%, transparent 58%),
    radial-gradient(95% 75% at -10% 100%, #0a4a52 0%, transparent 62%),
    var(--t-900);
  border-radius:0 0 2.1rem 2.1rem;
  padding:calc(1.6rem + env(safe-area-inset-top)) 1.5rem 2.15rem;
}
.cover::after{
  content:""; position:absolute; right:-4.4rem; bottom:-6.9rem;
  width:15.6rem; height:15.6rem; border-radius:50%;
  background:radial-gradient(circle, rgba(245,160,140,.20), transparent 68%);
}
.cover-in{max-width:var(--wrap); margin:0 auto; position:relative; z-index:1}

/* Üst çubuk: solda geri, sağda marka. Tek satır, her ekranda. */
.cover-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.9rem}
.cover-bar .logo{margin:0}

.cover-grid{display:grid; gap:1.4rem}
.cover .eyebrow{
  font-size:.69rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--p-500); margin-bottom:.7rem;
}
/* §15 büyük metin: sıkı tracking + sıkı leading */
.cover h1{margin:0 0 .55rem; font-size:2rem; line-height:1.1; font-weight:800; letter-spacing:-.04em; text-wrap:balance}
.cover .range{font-size:.86rem; color:rgba(255,255,255,.62); font-weight:500}

/* ---------- Bilgi kartı: dönem, hazırlayan, yayın, komşu aylar ----------
   Koyu zeminde yarı saydam cam. Bulanıklık yok: kaydırırken pahalı ve
   zemin zaten düz degrade. */
.cover-meta{
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  border-radius:1.2rem; padding:.35rem 1.05rem .4rem;
}
.cm-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.68rem 0; font-size:.8rem;
}
.cm-row + .cm-row{border-top:1px solid rgba(255,255,255,.09)}
.cm-l{color:rgba(255,255,255,.52); font-weight:600; letter-spacing:.01em; flex:0 0 auto}
.cm-row b{color:#fff; font-weight:700; text-align:right; min-width:0; letter-spacing:-.01em}
.cm-taslak{
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(245,160,140,.18); color:var(--p-500);
  padding:.22rem .55rem; border-radius:999px;
}
.cm-kisi{display:inline-flex; align-items:center; gap:.5rem}
.cm-kisi i{
  width:1.6rem; height:1.6rem; border-radius:50%; flex:0 0 auto;
  background:var(--p-500); color:var(--t-900);
  font-style:normal; font-weight:800; font-size:.6rem;
  display:grid; place-items:center;
}
.cm-kisi span{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}
.cm-kisi small{font-size:.66rem; font-weight:500; color:rgba(255,255,255,.55); margin-top:.1rem}

.cm-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
  margin:.15rem -.45rem .35rem; padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,.09);
}
.cm-nav a, .cm-nav .yok{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  font-size:.76rem; font-weight:700; color:#fff; text-decoration:none;
  padding:.5rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background-color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.cm-nav a:hover{background:rgba(255,255,255,.18)}
.cm-nav a:active{transform:scale(.97)}
.cm-nav a svg{width:.8rem; height:.8rem; flex:0 0 auto}
.cm-nav .yok{visibility:hidden}

/* ---------- Bölüm başlığı ---------- */
.section{margin-top:2.4rem}
.sec-head{display:flex; align-items:center; gap:.75rem; margin:0 .25rem .9rem}
.sec-ico{width:2.35rem; height:2.35rem; border-radius:.8rem; display:grid; place-items:center; flex:0 0 auto}
.sec-ico svg{width:1.19rem; height:1.19rem}
.sec-head h2{margin:0; font-size:1.19rem; font-weight:800; letter-spacing:-.034em; line-height:1.2}
.sec-head p{margin:.15rem 0 0; font-size:.78rem; color:var(--muted); font-weight:500}

/* ---------- Kart ---------- */
.card{background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow)}
.pad{padding:1.25rem}

/* ---------- Ayın özeti ---------- */
.summary{margin-top:-1.6rem; position:relative; z-index:2; box-shadow:var(--shadow-lift); overflow:hidden}
.sum-grid{display:grid; grid-template-columns:repeat(3,1fr); text-align:center}
.sum-cell{padding:1.4rem .5rem 1.25rem; position:relative}
.sum-cell + .sum-cell::before{
  content:""; position:absolute; left:0; top:1.65rem; bottom:1.5rem; width:1px; background:var(--line-soft);
}
.sum-cell .v{font-size:clamp(1.2rem, 5.9vw, 1.56rem); font-weight:800; letter-spacing:-.042em; line-height:1.05; white-space:nowrap}
.sum-cell .l{font-size:.72rem; color:var(--muted); margin-top:.44rem; font-weight:600; line-height:1.3}

.note{padding:1.15rem 1.25rem 1.25rem; background:var(--card-2); border-top:1px solid var(--line-soft)}
.note-head{display:flex; align-items:center; gap:.56rem; margin-bottom:.62rem}
.note-head .who{
  width:1.63rem; height:1.63rem; border-radius:50%; flex:0 0 auto;
  background:var(--p-100); color:#a35b45; display:grid; place-items:center;
  font-size:.63rem; font-weight:800;
}
.note-head b{font-size:.78rem; font-weight:700}
.note-head em{font-size:.72rem; color:var(--muted); font-style:normal; font-weight:500}
/* §15 gövde metni: tracking 0'a yakın, leading rahat */
.note p{margin:0; font-size:.875rem; line-height:1.68; letter-spacing:0; color:var(--ink-2)}
.card > .note:first-child{border-top:0; border-radius:var(--r-xl)}

/* ---------- İstatistik kartları ---------- */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:.62rem}

/* Kartların içi hizalı dursun.
   İki dertli yer var: bazı etiketler iki satır ("Size ulaşan kişi / mesaj +
   form"), bazıları tek. Ve ızgara satırındaki en uzun kart diğerlerini
   uzatıyor.
   Çözüm iki parçalı:
   1) Etiket kutusu her kartta en az iki satır yüksekliğinde — rakamlar
      aynı çizgide başlıyor.
   2) Rakamdan sonrası alt hizaya sabit (margin-top:auto) — bir kart
      beklenmedik şekilde uzasa bile rozet ve "Geçen ay" satırı kaymıyor. */
.stat{
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:1.05rem 1rem 1rem; min-height:7rem;
}
.stat .l{
  font-size:.75rem; color:var(--muted); font-weight:600; line-height:1.35;
  min-height:2.7em;            /* iki satır */
  margin-bottom:.62rem;
}
.stat .l span{color:var(--muted-2); font-weight:500}
/* Ziyaretçi kartı + ülke listesi: kart iki sütun olur. Solda rakam/rozet/
   "Geçen ay" her zamanki yerinde; sağda ülke listesi, kartın sağ altına
   yaslı, alttan yukarı büyür (en yüksek en üstte). Liste rakam sütunundan
   uzunsa fazlası etiketin altındaki boşluğa taşar; kart uzar, komşu kartlar
   grid ile aynı boya gelir. Masaüstünde bu kart diğerlerinden biraz geniş
   (1.6 : 1), mobilde tam satır. */
.stat.ulkeli{
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto auto; column-gap:.8rem; align-items:end;
}
.stat.ulkeli .l{grid-column:1/-1; grid-row:1; align-self:start}
.stat.ulkeli .v{grid-column:1; grid-row:3; margin-top:0}
.stat.ulkeli > .chip{grid-column:1; grid-row:4; justify-self:start}
.stat.ulkeli .prev{grid-column:1; grid-row:5}
.stat.ulkeli .ulkeler{grid-column:2; grid-row:2/6; align-self:end}
.stat .ulkeler{
  list-style:none; margin:0; padding:0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;
}
.stat .ulkeler .u{display:flex; align-items:center; gap:.3rem; min-width:0; max-width:100%; line-height:1}
.stat .ulkeler i{
  font-style:normal; font-size:.64rem; font-weight:500; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.stat .ulkeler b{font-size:.68rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; flex:0 0 auto}
.bayrak{
  width:.8rem; height:.8rem; border-radius:50%; flex:0 0 auto; display:block;
  box-shadow:0 0 0 1px rgba(18,35,42,.1);
}
/* Mobil: iki sütunlu grid'de ülkeli kart tam satır; tek kalan son kart da tam satır */
.stat.ulkeli{grid-column:1/-1}
.stats.ulkeli .stat:last-child:nth-child(even){grid-column:1/-1}
.stat .v{font-size:1.63rem; font-weight:800; letter-spacing:-.042em; line-height:1}
.stat:not(.wide) .v{margin-top:auto}
/* Birim ("dk", "sn") rakama yapışmasın; kendi boşluğu ve tonu olsun */
.stat .v small{
  font-size:.8rem; font-weight:600; color:var(--muted);
  letter-spacing:0; margin-left:.14em; margin-right:.1em;
}
.stat .prev small{font-size:.92em; margin-left:.12em}
.stat > .chip{align-self:flex-start}   /* rozet kart genişliğine yayılmasın */
.stat .prev{font-size:.72rem; color:var(--muted-2); margin-top:.44rem; font-weight:500}
/* Kırılımlı kartta "Geçen ay": kanal simgesi + sayı, her biri kendi renginde */
.stat .prev.kanal{display:flex; align-items:center; flex-wrap:wrap; gap:.2rem .5rem}
.stat .prev .pk{display:inline-flex; align-items:center; gap:.2rem; font-weight:800; letter-spacing:-.02em}
.stat .prev .pk svg{width:.7rem; height:.7rem; flex:0 0 auto}
.stat .prev .pk.wa{color:#128c4b}
.stat .prev .pk.tel{color:var(--t-500)}
.stat .prev .pk.mail{color:var(--p-600)}

/* ---------- Geniş takipçi kartı ----------
   Önceki düzende rozet rakamın yanında dikey ortalanıyordu; "3.880" ile
   "4.250" farklı boyutta olduğu için taban çizgileri tutmuyor, sağda da
   koca bir boşluk kalıyordu. Şimdi:
     üst satır  → etiket solda, rozet sağda (boşluk doluyor)
     alt satır  → 3.880 → 4.250, altlarında "geçen ay" / "bu ay"
   Rakamlar taban çizgisinden hizalı. */
.stat.wide{
  grid-column:1 / -1; min-height:0;
  display:flex; flex-direction:column; gap:.9rem;
  padding:1.15rem 1.2rem 1.2rem;
}
.stat.wide .l{min-height:0; margin-bottom:0}
.wide-ust{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.wide-ust .l{flex:1 1 auto}
.stat.wide .chip{margin-top:0; flex:0 0 auto}

.flow{display:flex; align-items:baseline; gap:.8rem}
.flow .f{display:flex; flex-direction:column; align-items:flex-start; gap:.18rem}
.flow .from{font-size:1.35rem; font-weight:600; color:var(--muted-2); letter-spacing:-.03em; line-height:1}
.flow .to{font-size:2rem; font-weight:800; letter-spacing:-.042em; color:var(--t-500); line-height:1}
.flow .f small{font-size:.66rem; font-weight:600; color:var(--muted-2); letter-spacing:.02em; text-transform:uppercase}
.flow .arr{width:1rem; height:1rem; flex:0 0 auto; color:var(--t-200); align-self:center; margin-top:-.7rem}
@media (min-width:46rem){
  .flow{gap:1.1rem}
  .flow .from{font-size:1.55rem}
  .flow .to{font-size:2.3rem}
}

/* ---------- Değişim rozeti ----------
   Oklar emoji veya metin karakteri değil, SVG. Maske olarak kullanıldığı için
   rengi rozetin renginden geliyor — iyi/kötü durumuna göre kendiliğinden
   değişiyor, her ekranda aynı görünüyor. */
.chip{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; letter-spacing:-.01em;
  padding:.25rem .56rem .25rem .47rem; border-radius:999px; margin-top:.56rem;
}
.chip.good{background:var(--good-bg); color:var(--good)}
.chip.bad{background:var(--bad-bg); color:var(--bad)}
.chip.flat{background:var(--flat-bg); color:var(--flat)}
.stat.wide .chip{margin-top:0}

.ar{
  width:.66em; height:.66em; flex:0 0 auto; display:block;
  background-color:currentColor;
  -webkit-mask:var(--ar) center/contain no-repeat;
          mask:var(--ar) center/contain no-repeat;
}
.ar.up{--ar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.7 10.3 9.3H1.7Z' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ar.down{--ar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 9.3 1.7 2.7h8.6Z' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ar.same{--ar:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.6' y='5' width='8.8' height='2' rx='1' fill='%23000'/%3E%3C/svg%3E")}

/* ---------- Öne çıkan içerik ---------- */
.blockhead{
  /* §15 küçük büyük-harf metin: pozitif tracking okunurluğu artırır */
  font-size:.69rem; font-weight:700; color:var(--muted-2); letter-spacing:.09em;
  margin:1.6rem .4rem .75rem; text-transform:uppercase;
}
.thumb{position:relative; background:var(--card-2)}
.thumb .ph{position:absolute; inset:0; width:100%; height:100%}
img.ph{object-fit:cover; display:block}
/* Kartın kendisi kırpmalı ki görselin sol köşeleri de yuvarlansın */
.hero-post{overflow:hidden}
.hero-post .thumb{aspect-ratio:16/10}
.tag{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:rgba(5,55,60,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.03em;
  padding:.3rem .7rem; border-radius:999px;
}
.kind{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:1.63rem; height:1.63rem; border-radius:50%;
  background:rgba(5,55,60,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center;
}
.kind svg{width:.75rem; height:.75rem; fill:#fff}
.hero-post .body{padding:1.05rem 1.2rem 1.2rem}
.hero-post .title{font-size:.9rem; font-weight:600; line-height:1.5; margin:0 0 .94rem}
.metrics{display:flex; gap:1.5rem}
.metrics .m .v{font-size:1.19rem; font-weight:800; letter-spacing:-.037em}
.metrics .m .l{font-size:.72rem; color:var(--muted); margin-top:.1rem; font-weight:500}

.mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:.62rem}
.mini{background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow)}
.mini .thumb{aspect-ratio:1/1}
.mini .body{padding:.75rem .8rem .875rem}
.mini .l{font-size:.69rem; color:var(--muted); font-weight:600; line-height:1.3}
.mini .v{font-size:1.125rem; font-weight:800; letter-spacing:-.037em; margin-top:.37rem}
.mini .u{font-size:.69rem; color:var(--muted-2); margin-top:.1rem; font-weight:500}

/* Görsel yer tutucuları — gerçek içerik görselleri buraya gelecek */
.ph-1{background:linear-gradient(140deg,#cfe3e3,#e8d7d0)}
.ph-2{background:linear-gradient(140deg,#fbdcd2,#f6ece2)}
.ph-3{background:linear-gradient(140deg,#d5e9e5,#cfe0e6)}
.ph-4{background:linear-gradient(140deg,#e5ded4,#f8d9cd)}
.ph-5{background:linear-gradient(140deg,#dbe8ea,#ecdfe0)}

/* ---------- Kazanan kampanya ---------- */
.winner{display:flex; align-items:center; gap:.875rem; padding:1.15rem 1.2rem}
.winner .medal{
  width:2.75rem; height:2.75rem; border-radius:.875rem; flex:0 0 auto;
  background:var(--p-50); color:var(--nav-ig);
  display:grid; place-items:center;
}
.winner .medal svg{width:1.35rem; height:1.35rem}
.winner .l{font-size:.72rem; color:var(--muted); font-weight:600}
.winner .n{font-size:.94rem; font-weight:700; letter-spacing:-.027em; margin-top:.19rem}
.winner .r{margin-left:auto; text-align:right; flex:0 0 auto}
.winner .r .v{font-size:1.31rem; font-weight:800; letter-spacing:-.037em; color:var(--t-500)}
.winner .r .u{font-size:.69rem; color:var(--muted); font-weight:500}

/* ---------- Liste satırları ---------- */
.rows{padding:.5rem .37rem}
.row{display:flex; align-items:center; gap:.8rem; padding:.75rem .94rem}
.row .txt{flex:1 1 auto; min-width:0}
.row .nm{font-size:.84rem; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .bar{height:.37rem; border-radius:999px; background:var(--t-25); margin-top:.5rem; overflow:hidden}
.row .bar i{display:block; height:100%; border-radius:999px; background:var(--t-400); transform-origin:left; transform:scaleX(0); transition:transform .9s cubic-bezier(.22,1,.36,1)}
.in .row .bar i{transform:scaleX(1)}
.row .val{font-size:.9rem; font-weight:700; letter-spacing:-.03em; flex:0 0 auto}
.row.sub{border-top:1px solid var(--line-soft); padding:.875rem 1.2rem}
.row.sub .nm{font-weight:500; color:var(--muted)}

/* ---------- Trafik kaynakları ---------- */
.seg{display:flex; height:.75rem; border-radius:999px; overflow:hidden; gap:.19rem; margin-bottom:1.05rem}
.seg i{display:block; height:100%; transform-origin:left; transform:scaleX(0); transition:transform .85s cubic-bezier(.22,1,.36,1)}
.in .seg i{transform:scaleX(1)}
.seg i:nth-child(2){transition-delay:.06s} .seg i:nth-child(3){transition-delay:.12s} .seg i:nth-child(4){transition-delay:.18s}
/* Sabit iki sütun dar ekranda taşıyordu (etiket + yüzde sığmıyor).
   auto-fit ile yer varsa iki, yoksa tek sütuna kendiliğinden iniyor —
   sihirli kırılma noktası gerekmiyor. */
.legend{display:grid; grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr)); gap:.75rem 1rem}
.legend div{display:flex; align-items:center; gap:.56rem; font-size:.81rem; font-weight:500}
.legend .dot{width:.56rem; height:.56rem; border-radius:50%; flex:0 0 auto}
.legend .pc{margin-left:auto; font-weight:700; font-size:.84rem; letter-spacing:-.03em}

/* --- En çok ziyaret edilen sayfalar: numaralı, ince çizgili liste --- */
.card.sayfalar{padding:.25rem 1.1rem}
.sy{display:flex; gap:.7rem; padding:.5rem 0; border-top:1px solid var(--line-soft); align-items:center}
.sy:first-child{border-top:0}
.sy .no{flex:0 0 auto; width:1.2rem; font-size:.62rem; font-weight:700; color:var(--t-300); letter-spacing:.05em}
.sy.bir .no{color:var(--t-500)}
.sy .ad{flex:1 1 auto; min-width:0}
.sy .ust{display:flex; align-items:baseline; gap:.7rem}
.sy .nm{flex:1 1 auto; min-width:0; font-size:.8rem; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sy .ust b{flex:0 0 auto; font-size:.86rem; font-weight:800; letter-spacing:-.03em}
.sy.bir .ust b{font-size:.95rem}
.sy .alt{display:flex; align-items:center; gap:.55rem; margin-top:.28rem}
.sy .cizgi{flex:1 1 auto; height:.2rem; border-radius:999px; background:var(--t-25); overflow:hidden}
.sy .cizgi i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--t-500), var(--t-300));
  transform-origin:left; transform:scaleX(0); transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.in .sy .cizgi i{transform:scaleX(1)}
.sy .alt small{flex:0 0 auto; min-width:2rem; text-align:right; font-size:.6rem; font-weight:700; color:var(--muted)}

/* --- Ziyaretçiler nereden geldi: küçük halka + yanında liste, üzerine gelince dilim öne çıkar --- */
.card.halka{padding:1.1rem 1.2rem 1.1rem 1.25rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem; align-items:center; align-content:center}
.halka-in{position:relative; width:7.6rem; height:7.6rem}
.halka-svg{width:100%; height:100%; display:block; overflow:visible}
.halka-svg .dilim{transition:stroke-width .25s ease, opacity .25s ease; cursor:pointer}
.halka.on .dilim:not(.sec){opacity:.32}
.halka .dilim.sec{stroke-width:6.6}
.halka-orta{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.4rem; pointer-events:none;
}
.halka-orta b{font-size:1.22rem; font-weight:800; letter-spacing:-.045em; line-height:1; transition:transform .2s ease}
.halka-orta span{font-size:.6rem; font-weight:600; color:var(--muted); margin-top:.24rem; line-height:1.2}
.halka.on .halka-orta b{transform:scale(1.06)}
.halka-liste{display:flex; flex-direction:column; min-width:0}
.hl-satir{
  display:flex; align-items:center; gap:.6rem; padding:.48rem .55rem; border-radius:.7rem;
  font-size:.82rem; font-weight:500; cursor:pointer; outline:none;
  transition:background .2s ease, opacity .2s ease;
}
.hl-satir + .hl-satir{margin-top:.1rem}
.hl-satir .dot{width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto; transition:transform .2s ease}
.hl-satir .ad{flex:1 1 auto; min-width:0}
.hl-satir .pc{font-weight:800; letter-spacing:-.03em; font-size:.86rem}
.halka.on .hl-satir:not(.sec){opacity:.5}
.hl-satir.sec{background:var(--t-25); opacity:1}
.hl-satir.sec .dot{transform:scale(1.35)}
.hl-satir:focus-visible{box-shadow:0 0 0 2px var(--t-300)}
@media (max-width:30rem){
  .card.halka{grid-template-columns:1fr; justify-items:center; gap:.9rem}
  .halka-liste{width:100%}
}

/* --- Ziyaretçi şehirleri: öne çıkan şehir + katmanlı çubuk + liste --- */
.card.sehir{padding:1.2rem 1.25rem 1rem}
.sehir-bas .etiket{
  display:block; font-size:.62rem; font-weight:700; color:var(--t-500); letter-spacing:.08em; text-transform:uppercase;
}
.sehir-buyuk{display:flex; align-items:baseline; gap:.6rem; margin-top:.3rem; flex-wrap:wrap}
.sehir-buyuk b{font-size:1.45rem; font-weight:800; letter-spacing:-.035em; line-height:1.05}
.sehir-buyuk span{font-size:1.1rem; font-weight:800; color:var(--t-500); letter-spacing:-.03em}
.sehir-bas small{display:block; font-size:.7rem; color:var(--muted); margin-top:.3rem}
.sehir-cubuk{display:flex; height:.7rem; border-radius:999px; overflow:hidden; gap:.14rem; margin:1rem 0 .85rem}
.sehir-cubuk i{display:block; height:100%; border-radius:2px; transform-origin:left; transform:scaleX(0); transition:transform .85s cubic-bezier(.22,1,.36,1)}
.in .sehir-cubuk i{transform:scaleX(1)}
.sehir-cubuk i:nth-child(2){transition-delay:.05s} .sehir-cubuk i:nth-child(3){transition-delay:.1s}
.sehir-cubuk i:nth-child(4){transition-delay:.15s} .sehir-cubuk i:nth-child(5){transition-delay:.2s} .sehir-cubuk i:nth-child(6){transition-delay:.25s}
.sehir-liste{display:flex; flex-direction:column}
.ss{display:flex; align-items:center; gap:.6rem; padding:.42rem 0; border-top:1px solid var(--line-soft); font-size:.82rem; font-weight:500}
.ss:first-child{border-top:0}
.ss .dot{width:.6rem; height:.6rem; border-radius:50%; flex:0 0 auto}
.ss .ad{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ss .kisi{color:var(--muted); font-size:.76rem; flex:0 0 auto}
.ss .pc{font-weight:800; letter-spacing:-.03em; min-width:2.6rem; text-align:right; flex:0 0 auto}
.ss.diger .ad{color:var(--muted)}
.ss.diger.var{position:relative; cursor:default; outline:none; border-radius:.6rem}
.ss.diger.var .ipucu{
  display:inline-block; margin-left:.35rem; padding:.12rem .42rem; border-radius:999px; vertical-align:middle;
  font-size:.58rem; font-weight:700; letter-spacing:.03em; color:var(--t-700); background:var(--t-50);
}
.diger-pop{
  position:absolute; right:0; bottom:calc(100% + .45rem); z-index:6; width:min(15rem, 100%);
  background:var(--card); border-radius:.95rem; padding:.7rem .9rem .55rem;
  box-shadow:0 14px 36px rgba(18,35,42,.16), 0 0 0 1px var(--line-soft);
  opacity:0; visibility:hidden; transform:translateY(.35rem);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.diger-pop::after{
  content:''; position:absolute; right:1rem; top:100%; border:.4rem solid transparent; border-top-color:var(--card);
}
.ss.diger.var:hover .diger-pop, .ss.diger.var:focus-within .diger-pop, .ss.diger.var.acik .diger-pop{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.dp-bas{font-size:.6rem; font-weight:700; color:var(--muted-2); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.3rem}
.dp-satir{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.3rem 0; border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--ink)}
.dp-satir:first-of-type{border-top:0}
.dp-satir b{font-weight:800; letter-spacing:-.02em}
.dp-satir.kalan{color:var(--muted)} .dp-satir.kalan b{color:var(--muted)}
@media (max-width:22rem){ .halka-in{width:9rem; height:9rem} }

/* --- Üzerine gelme vurgusu (sayfalar / şehirler / Google) --- */
.sy{border-radius:.7rem; transition:opacity .2s ease, background .2s ease; outline:none; cursor:default}
.sy .ust b, .sy .no{transition:transform .2s ease, color .2s ease}
.sayfalar.on .sy:not(.sec){opacity:.42}
.sy.sec{opacity:1}
.sy.sec .ust b{transform:scale(1.1); transform-origin:right center; color:var(--t-700)}
.sy.sec .no{color:var(--t-500)}
.sy.sec .cizgi i{background:linear-gradient(90deg, var(--t-700), var(--t-500))}
.sy:focus-visible{box-shadow:0 0 0 2px var(--t-300)}

.sehir-cubuk i{transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .2s ease, filter .2s ease; cursor:pointer}
.sehir.on .sehir-cubuk i:not(.sec){opacity:.35}
.sehir.on .sehir-cubuk i.sec{transform:scaleX(1) scaleY(1.45); filter:saturate(1.15)}
.ss{border-radius:.6rem; transition:opacity .2s ease, background .2s ease; outline:none; cursor:default}
.sehir.on .ss:not(.sec){opacity:.45}
.ss.sec{opacity:1}
.ss.sec .pc{color:var(--t-700)}
.ss .dot{transition:transform .2s ease}
.ss.sec .dot{transform:scale(1.35)}
.ss:focus-visible{box-shadow:0 0 0 2px var(--t-300)}
.sehir-buyuk b, .sehir-buyuk span, .sehir-bas small, .sehir-bas .etiket{transition:opacity .15s ease}
.sehir-bas.degisiyor > *{opacity:.35}

.gsc-kalem{border-radius:.8rem; padding:.45rem .55rem; margin:-.45rem -.55rem; transition:opacity .2s ease, background .2s ease; outline:none; cursor:default}
.gsc-kalem .v{transition:transform .2s ease, color .2s ease; transform-origin:left center}
.gsc.on .gsc-kalem:not(.sec){opacity:.42}
.gsc-kalem.sec{opacity:1; background:var(--t-25)}
.gsc-kalem.sec .v{transform:scale(1.08); color:var(--t-700)}
.gsc-kalem:focus-visible{box-shadow:0 0 0 2px var(--t-300)}
.gsc-not{margin:.9rem 0 0; padding:.55rem .75rem; border-radius:.7rem; background:var(--t-25); font-size:.72rem; line-height:1.5; color:var(--muted); font-weight:500}
.gsc-sorgular .q{border-radius:.6rem; transition:opacity .2s ease, background .2s ease; outline:none; cursor:default}
.gsc-sorgular .qt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.gsc-sorgular .ek{
  display:block; font-style:normal; font-size:.66rem; color:var(--t-700); font-weight:600;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .25s ease, opacity .2s ease, margin .25s ease;
}
.gsc.on2 .q:not(.sec){opacity:.45}
.q.sec{opacity:1}
.q.sec .ek{max-height:1.4rem; opacity:1; margin-top:.15rem}
.q.sec .n{color:var(--t-700)}
.q:focus-visible{box-shadow:0 0 0 2px var(--t-300)}
@media (prefers-reduced-motion:reduce){
  .sy, .ss, .q, .gsc-kalem, .sehir-cubuk i, .sy .ust b, .gsc-kalem .v, .ss .dot, .gsc-sorgular .ek{transition:none}
}

/* --- Üst bölümlerde canlılık: kartlar fareyle yükselir, rakam vurgulanır --- */
.stat{transition:transform .22s ease, box-shadow .22s ease; position:relative}
.stat::after{
  content:''; position:absolute; left:1rem; right:1rem; top:0; height:3px; border-radius:0 0 3px 3px; pointer-events:none;
  background:linear-gradient(90deg, var(--t-500), var(--p-500)); opacity:0; transform:scaleX(.4); transform-origin:left;
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.stat:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(18,35,42,.12)}
.stat:hover::after{opacity:1; transform:scaleX(1)}
.stat .v, .stat .kirilim b{transition:transform .22s ease, color .22s ease; transform-origin:left center}
.stat:hover .v{transform:scale(1.05); color:var(--t-700)}
.stat:hover .chip{transform:translateX(2px)}
.stat .chip{transition:transform .22s ease}
.stat.wide:hover .to{transform:scale(1.06); display:inline-block}
.stat.wide .to{transition:transform .22s ease; transform-origin:left center}

/* Öne çıkan içerikler: görsel yaklaşır, kart yükselir */
.hero-post, .mini{transition:transform .25s ease, box-shadow .25s ease}
.hero-post:hover, .mini:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(18,35,42,.14)}
.hero-post .thumb, .mini .thumb{overflow:hidden}
.hero-post .thumb .ph, .mini .thumb .ph{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hero-post:hover .thumb .ph, .mini:hover .thumb .ph{transform:scale(1.05)}
.mini .v{transition:color .2s ease}
.mini:hover .v{color:var(--t-700)}

/* Kampanya kartı: renkli kenar, madalya canlanır, altında üç küçük kalem */
.card.kamp{position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.card.kamp::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--p-500), var(--t-500))}
.card.kamp:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(18,35,42,.14)}
.card.kamp .winner .medal{
  background:linear-gradient(135deg, var(--p-100), var(--p-50)); color:var(--p-600);
  box-shadow:inset 0 0 0 1px rgba(236,145,125,.25); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.card.kamp:hover .winner .medal{transform:rotate(-8deg) scale(1.08)}
.card.kamp .winner .r .v{transition:transform .22s ease; transform-origin:right center}
.card.kamp:hover .winner .r .v{transform:scale(1.06)}
.kamp-alt{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr)); gap:.6rem;
  padding:0 1.2rem 1.15rem;
}
.kamp-alt .ka{
  background:var(--card-2); border-radius:.9rem; padding:.7rem .85rem; display:flex; flex-direction:column; gap:.3rem;
  transition:background .2s ease, transform .2s ease; min-width:0;
}
.kamp-alt .ka:hover{background:var(--t-25); transform:translateY(-2px)}
.kamp-alt .ka .l{font-size:.66rem; font-weight:600; color:var(--muted); line-height:1.3}
.kamp-alt .ka b{font-size:1rem; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
.kamp-alt .ka:first-child b{color:var(--t-500)}
.kamp-alt .ka .pay{display:block; height:.32rem; border-radius:999px; background:var(--t-100); overflow:hidden; margin-top:.15rem}
.kamp-alt .ka .pay i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--p-500), var(--t-500)); transform-origin:left; transform:scaleX(0); transition:transform .9s cubic-bezier(.22,1,.36,1)}
.in .kamp-alt .ka .pay i{transform:scaleX(1)}
.kamp-alt.gads .ka:first-child b{color:var(--gads)}
@media (prefers-reduced-motion:reduce){
  .stat, .stat::after, .stat .v, .hero-post, .mini, .hero-post .thumb .ph, .mini .thumb .ph, .card.kamp, .card.kamp .winner .medal, .kamp-alt .ka, .kamp-alt .ka .pay i{transition:none}
  .kamp-alt .ka .pay i{transform:scaleX(1)}
}

/* --- Kart açıklaması: sağ üstte "?" (üzerine gelince belirir), tıklayınca kutu --- */
.stat .yardim{
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:1.35rem; height:1.35rem; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--t-50); color:var(--t-700); font-weight:800; font-size:.72rem; line-height:1; font-family:inherit;
  display:grid; place-items:center; opacity:0; transform:scale(.85);
  transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.stat:hover .yardim, .stat.yardim-acik .yardim, .stat .yardim:focus-visible{opacity:1; transform:none}
.stat .yardim:hover, .stat.yardim-acik .yardim{background:var(--t-500); color:#fff}
.stat .yardim:focus-visible{outline:none; box-shadow:0 0 0 2px var(--t-300)}
@media (hover:none){ .stat .yardim{opacity:.75; transform:none} }
.yardim-pop{
  position:absolute; top:2.2rem; right:.6rem; z-index:6; width:min(17rem, calc(100vw - 3rem));
  background:var(--t-900); color:#fff; border-radius:.9rem; padding:.8rem .95rem .85rem;
  box-shadow:0 16px 40px rgba(5,55,60,.28);
  opacity:0; visibility:hidden; transform:translateY(-.3rem) scale(.98); transform-origin:top right;
  transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear .22s;
}
.yardim-pop::before{content:''; position:absolute; right:.45rem; top:-.4rem; border:.42rem solid transparent; border-bottom-color:var(--t-900); border-top:0}
.stat.yardim-acik .yardim-pop{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.yardim-pop b{display:block; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:.32rem}
.yardim-pop p{margin:0; font-size:.8rem; line-height:1.5; font-weight:500; color:#fff}
.stat.wide .yardim{top:.7rem; right:.7rem}
.stat.yardim-acik{z-index:5}
/* Dar ekranda kutu kartın içinde kalır, sağa taşmaz */
@media (max-width:46rem){
  .yardim-pop{left:.6rem; right:.6rem; width:auto; transform-origin:top center}
}
@media (prefers-reduced-motion:reduce){ .stat .yardim, .yardim-pop{transition:none} }

/* --- Aylık hedef --- */
.hedef{margin:1rem 1.2rem 1.2rem; padding:.95rem 1.05rem; background:var(--t-25); border-radius:1rem}
.hedef-ust{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.hedef-lbl{font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-500)}
.hedef-ust b{font-size:.9rem; font-weight:800; letter-spacing:-.02em}
.hedef-pc{margin-left:auto; font-size:.9rem; font-weight:800; color:var(--t-700)}
.hedef-cubuk{height:.55rem; border-radius:999px; background:var(--t-100); overflow:hidden; margin-top:.6rem}
.hedef-cubuk i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--t-500), var(--on)); transform-origin:left; transform:scaleX(0); transition:transform 1s cubic-bezier(.22,1,.36,1)}
.in .hedef-cubuk i, .summary.in .hedef-cubuk i{transform:scaleX(1)}
.hedef small{display:block; margin-top:.4rem; font-size:.68rem; color:var(--muted); font-weight:600}
.hedef.tamam .hedef-pc{color:var(--on)}
.hedef.tamam .hedef-cubuk i{background:var(--on)}

/* --- Bu ay yapılanlar --- */
.yapilanlar{margin:.4rem 1.2rem 1.25rem}
.yap-lbl{font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.55rem}
.yapilanlar ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.yapilanlar li{display:flex; align-items:flex-start; gap:.55rem; font-size:.86rem; font-weight:500; line-height:1.45; color:var(--ink-2)}
.yapilanlar li svg{width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.1rem; padding:.15rem; border-radius:50%; background:var(--on-50); color:var(--on)}
.yapilanlar li.gizli{display:none}
.yapilanlar.acik li.gizli{display:flex; animation:yapBelir .3s ease both}
@keyframes yapBelir{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.yap-devam{
  margin-top:.75rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.72rem 1rem; border-radius:.85rem; border:0; background:var(--t-50); color:var(--t-900);
  font-weight:800; font-size:.84rem; line-height:1; font-family:inherit; letter-spacing:-.01em; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.yap-devam:hover{background:var(--t-100)}
.yap-devam:active{transform:scale(.99)}
.yap-devam svg{width:1rem; height:1rem; color:var(--t-500); transition:transform .25s ease}
.yapilanlar.acik .yap-devam{background:var(--t-25)}
.yap-devam .kapa{display:none}
.yapilanlar.acik .yap-devam .ac{display:none}
.yapilanlar.acik .yap-devam .kapa{display:inline}
.yapilanlar.acik .yap-devam svg{transform:rotate(180deg)}
@media print{ .yapilanlar li.gizli{display:flex} .yap-devam{display:none} }

/* --- Geri bildirim --- */
.geri-bildirim{margin-top:2rem; padding:1.4rem 1.3rem; text-align:center}
.geri-bildirim h3{margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.03em}
.geri-bildirim p{margin:.35rem 0 0; font-size:.82rem; color:var(--muted); font-weight:500}
.gb-form{display:flex; gap:.6rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}
.gb-form.not{flex-direction:column; align-items:stretch; max-width:26rem; margin-left:auto; margin-right:auto}
.gb-secim{display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:center; margin:.7rem auto .2rem; padding:.45rem .5rem .45rem .9rem; border-radius:999px; background:var(--t-25); font-size:.8rem; font-weight:600; color:var(--muted)}
.gb-secim b{font-weight:800; color:var(--ink)}
.gb-secim b.evet{color:var(--good)}
.gb-secim b.hayir{color:#a35b45}
.gb-secim form{display:inline}
.gb-secim button{border:0; background:var(--card); color:var(--t-700); border-radius:999px; padding:.35rem .7rem; font-family:inherit; font-size:.72rem; font-weight:700; cursor:pointer; box-shadow:inset 0 0 0 1px var(--line)}
.gb-secim button:hover{background:var(--t-50)}
.gb-form textarea{font:inherit; font-size:.86rem; padding:.7rem .85rem; border-radius:.9rem; border:1.5px solid var(--line); resize:vertical; background:var(--card); color:var(--ink)}
.gb-form textarea:focus{outline:none; border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50)}
.gb-btn{
  display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.05rem; border-radius:999px; border:1.5px solid var(--line);
  background:var(--card); color:var(--ink); font-weight:700; font-size:.84rem; line-height:1; font-family:inherit; cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.gb-btn svg{width:1rem; height:1rem}
.gb-btn.evet{background:var(--t-900); color:#fff; border-color:var(--t-900)}
.gb-btn.evet:hover{background:var(--t-700)}
.gb-btn.hayir:hover{background:var(--t-25); border-color:var(--t-200)}
.gb-btn:active{transform:scale(.97)}
@media print{ .geri-bildirim{display:none} }

/* --- Açılış perdesi: logo, dolan çubuk, "Veriler doğrulanıyor" --- */
.perde{position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; transition:opacity .45s ease, visibility 0s linear .45s}
.perde.bitti{opacity:0; visibility:hidden}
.perde-in{display:flex; flex-direction:column; align-items:center; gap:1.1rem; width:min(18rem, 80vw)}
.perde-in .logo{font-size:1.5rem}
.perde-cubuk{width:100%; height:.38rem; border-radius:999px; background:var(--t-100); overflow:hidden}
.perde-cubuk i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--t-500), var(--on)); transition:width .18s linear}
.perde-yazi{font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.perde-yazi.ok{color:var(--on)}
@media print{ .perde{display:none} }
@media (prefers-reduced-motion:reduce){ .perde{display:none} }

/* --- Cihaz onayı ekranı --- */
.cihaz-govde{margin:0; background:var(--bg)}
.cihaz-ekran{min-height:100vh; display:grid; place-items:center; padding:1.5rem}
.ce-kutu{width:min(26rem, 100%); background:var(--card); border-radius:1.6rem; box-shadow:var(--shadow); padding:2rem 1.7rem 1.8rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem}
.ce-kutu .logo{font-size:1.15rem}
.ce-marka{display:flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:600; color:var(--muted)}
.ce-logo{width:1.75rem; height:1.75rem; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:.6rem; font-weight:800; background:var(--t-50); color:var(--t-700)}
.ce-logo img{width:100%; height:100%; object-fit:cover; display:block}
.ce-ik{width:3.6rem; height:3.6rem; border-radius:50%; display:grid; place-items:center; background:var(--t-50); color:var(--t-700); margin-top:.4rem}
.ce-ik svg{width:1.6rem; height:1.6rem}
.ce-ik.bekle{background:var(--p-50); color:var(--p-600)}
.ce-ik.ok{background:var(--on-50); color:var(--on)}
.ce-ik.hata{background:#fdeceb; color:#c0392b}
.ce-kutu h1{margin:.2rem 0 0; font-size:1.35rem; font-weight:800; letter-spacing:-.035em}
.ce-kutu p{margin:0; font-size:.88rem; line-height:1.6; color:var(--ink-2)}
.ce-kutu small{font-size:.7rem; color:var(--muted-2); font-weight:500}
.ce-kutu form{width:100%; margin-top:.4rem; display:flex; flex-direction:column; gap:.6rem}
.ce-alan{display:flex; flex-direction:column; gap:.3rem; text-align:left}
.ce-alan span{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ce-alan input{font:inherit; font-size:.95rem; font-weight:600; padding:.75rem .9rem; border-radius:.8rem; border:1.5px solid var(--line); background:var(--card); color:var(--ink)}
.ce-alan input:focus{outline:0; border-color:var(--t-300); box-shadow:0 0 0 3px var(--t-50)}
.ce-btn{display:inline-flex; align-items:center; justify-content:center; width:100%; padding:.85rem 1.2rem; border-radius:999px; border:0; background:var(--t-900); color:#fff; font-size:.92rem; font-weight:800; letter-spacing:-.01em; text-decoration:none; cursor:pointer; font-family:inherit}
.ce-btn:hover{background:var(--t-700)}
.ce-hata{width:100%; padding:.6rem .8rem; border-radius:.8rem; background:#fdeceb; color:#a93226; font-size:.8rem; font-weight:600}
.ce-nabiz{display:flex; gap:.4rem; margin:.3rem 0}
.ce-nabiz i{width:.55rem; height:.55rem; border-radius:50%; background:var(--t-300); animation:nabiz 1.2s ease-in-out infinite}
.ce-nabiz i:nth-child(2){animation-delay:.2s} .ce-nabiz i:nth-child(3){animation-delay:.4s}
@keyframes nabiz{0%,80%,100%{transform:scale(.7); opacity:.4} 40%{transform:scale(1); opacity:1}}

/* --- Geçici giriş (PIN) --- */
.ce-ayrac{display:flex; align-items:center; gap:.7rem; width:100%; margin:.6rem 0 .2rem; color:var(--muted-2); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.ce-ayrac::before, .ce-ayrac::after{content:''; flex:1 1 auto; height:1px; background:var(--line-soft)}
.ce-gecici{display:flex; align-items:center; gap:.7rem; width:100%; padding:.7rem .8rem .7rem .75rem; border-radius:1rem; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; text-align:left; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease}
.ce-gecici[hidden], .ce-pin[hidden]{display:none}
.ce-gecici:hover{background:var(--t-25); border-color:var(--t-100)}
.ce-gecici:active{transform:scale(.99)}
.ce-gecici > svg{width:1.15rem; height:1.15rem; color:var(--t-500); flex:0 0 auto}
.ce-gecici span{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.2}
.ce-gecici b{font-size:.84rem; font-weight:800; letter-spacing:-.02em}
.ce-gecici small{font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.12rem}
.ce-gecici .ok{width:.85rem; height:.85rem; color:var(--t-300)}
.ce-pin{width:100%; display:flex; flex-direction:column; align-items:center; gap:.7rem; animation:pinGel .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pinGel{from{opacity:0; transform:translateY(.4rem)} to{opacity:1; transform:none}}
.pin-bas{text-align:center}
.pin-bas b{display:block; font-size:.95rem; font-weight:800; letter-spacing:-.025em}
.pin-bas span{display:block; font-size:.76rem; color:var(--muted); margin-top:.2rem; line-height:1.5}
.pin-kutular{display:flex; gap:.6rem; justify-content:center; margin:.3rem 0}
.pin-kutu{width:3.1rem; height:3.6rem; border-radius:.95rem; border:1.5px solid var(--line); background:var(--card); text-align:center; font:inherit; font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); caret-color:var(--t-500); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s cubic-bezier(.2,.8,.2,1)}
.pin-kutu:focus{outline:0; border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50); transform:translateY(-2px)}
.pin-kutu.dolu{background:var(--t-25); border-color:var(--t-200)}
.pin-kutu.pat{animation:pinPat .28s cubic-bezier(.2,.8,.2,1)}
@keyframes pinPat{0%{transform:scale(.9)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}
.ce-pin.hatali .pin-kutular{animation:pinSallan .5s cubic-bezier(.36,.07,.19,.97)}
.ce-pin.hatali .pin-kutu{border-color:#e0776a; background:#fdeceb}
@keyframes pinSallan{10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}}
.pin-hata{font-size:.76rem; font-weight:700; color:#c0392b; text-align:center}
.ce-pin .ce-btn[disabled]{opacity:.45; cursor:default}
.ce-pin .ce-btn.bekle{opacity:.7}
@media (prefers-reduced-motion:reduce){ .ce-pin, .pin-kutu.pat, .ce-pin.hatali .pin-kutular{animation:none} }

/* --- Paylaşım modalı --- */
.rail-btn.paylas{background:var(--t-900); color:#fff; border-color:var(--t-900)}
.rail-btn.paylas:hover{background:var(--t-700)}
.paylas-modal{max-width:min(30rem, calc(100vw - 2rem))}
.pm-yeni{margin-top:1rem; padding:.85rem .95rem; border-radius:.9rem; background:var(--on-50)}
.pm-yeni b{display:block; font-size:.84rem; font-weight:800; color:var(--on)}
.pm-link{display:flex; gap:.5rem; align-items:center; margin-top:.5rem}
.pm-link code{flex:1 1 auto; min-width:0; font-size:.72rem; word-break:break-all; background:var(--card); padding:.5rem .6rem; border-radius:.6rem}
.pm-kopya{flex:0 0 auto; border:0; border-radius:999px; padding:.5rem .85rem; background:var(--t-900); color:#fff; font-size:.74rem; font-weight:800; font-family:inherit; cursor:pointer}
.pm-yeni small{display:block; margin-top:.45rem; font-size:.66rem; color:var(--muted)}
.pm-form{margin-top:1rem}
.pm-bolumler{display:grid; gap:.4rem}
.pm-sec{display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:.75rem; background:var(--t-25); font-size:.84rem; font-weight:600; cursor:pointer}
.pm-sec input{width:1.05rem; height:1.05rem; accent-color:var(--t-500); margin:0}
.pm-alt{display:flex; align-items:center; gap:.7rem; margin-top:.9rem; flex-wrap:wrap}
.pm-alt label{display:flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; color:var(--muted)}
.pm-alt select{font:inherit; font-size:.82rem; font-weight:600; padding:.5rem .7rem; border-radius:.7rem; border:1.5px solid var(--line); background:var(--card); color:var(--ink)}
.pm-alt .ce-btn{width:auto; margin-left:auto; padding:.7rem 1.1rem; font-size:.84rem}
.pm-liste{margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line-soft)}
.pm-satir{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-top:1px solid var(--line-soft); font-size:.8rem; font-weight:600}
.pm-satir:first-of-type{border-top:0}
.pm-satir span{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.pm-satir small{font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.1rem}
.pm-satir button{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:700; font-family:inherit; cursor:pointer; color:var(--ink)}
.pm-satir button:hover{background:var(--t-25)}

/* --- Hangi ülkelerden geldiler? --- */
.card.ulke{padding:1.2rem 1.25rem 1.05rem}
.ulke-bas{display:flex; align-items:center; gap:.85rem}
.ub-bayrak{width:2.9rem; height:2.9rem; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); display:grid; place-items:center; background:var(--t-25); transition:transform .25s ease}
.ub-bayrak svg{width:100%; height:100%; display:block; object-fit:cover}
.ulke.on .ub-bayrak{transform:scale(1.06)}
.ub-yazi{min-width:0}
.ub-yazi .etiket{font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.ub-buyuk{display:flex; align-items:baseline; gap:.6rem; margin-top:.15rem; flex-wrap:wrap}
.ub-buyuk b{font-size:1.45rem; font-weight:800; letter-spacing:-.035em; line-height:1.05}
.ub-buyuk span{font-size:1.1rem; font-weight:800; color:var(--t-500); letter-spacing:-.03em}
.ub-yazi small{display:block; font-size:.7rem; color:var(--muted); margin-top:.25rem}
.ub-yazi > *, .ub-bayrak{transition:opacity .15s ease, transform .25s ease}
.ulke-bas.degisiyor .ub-yazi > *{opacity:.35}
.ulke-liste{display:flex; flex-direction:column; margin-top:1rem}
.us{display:flex; align-items:center; gap:.7rem; padding:.42rem .35rem; border-top:1px solid var(--line-soft); border-radius:.6rem; outline:none; cursor:default; transition:opacity .2s ease, background .2s ease}
.us:first-child{border-top:0}
.ulke.on .us{opacity:.45}
.ulke.on .us.sec{opacity:1; background:var(--t-25)}
.us:focus-visible{box-shadow:0 0 0 2px var(--t-300)}
.us-bayrak{width:1.35rem; height:1.35rem; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .2s ease}
.us-bayrak svg{width:100%; height:100%; display:block}
.us.sec .us-bayrak{transform:scale(1.25)}
.us-govde{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.3rem}
.us-ust{display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:500}
.us-ust .ad{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.us-ust .kisi{color:var(--muted); font-size:.76rem}
.us-ust .pc{font-weight:800; letter-spacing:-.03em; min-width:2.6rem; text-align:right}
.us.sec .pc{color:var(--t-700)}
.us-bar{display:block; height:.36rem; border-radius:999px; background:var(--t-25); overflow:hidden}
.us-bar i{display:block; height:100%; border-radius:999px; transform-origin:left; transform:scaleX(0); transition:transform .85s cubic-bezier(.22,1,.36,1), filter .2s ease}
.in .us-bar i{transform:scaleX(1)}
.us:nth-child(2) .us-bar i{transition-delay:.06s} .us:nth-child(3) .us-bar i{transition-delay:.12s}
.us:nth-child(4) .us-bar i{transition-delay:.18s} .us:nth-child(5) .us-bar i{transition-delay:.24s} .us:nth-child(6) .us-bar i{transition-delay:.3s} .us:nth-child(7) .us-bar i{transition-delay:.36s} .us:nth-child(8) .us-bar i{transition-delay:.42s}
.us.sec .us-bar i{filter:brightness(1.12)}
.ulke-alt{display:flex; align-items:center; gap:.55rem; margin-top:.9rem; padding:.6rem .8rem; border-radius:.85rem; background:var(--p-50); font-size:.76rem; color:var(--ink-2); font-weight:500}
.ulke-alt .ua-ik{width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--p-600); flex:0 0 auto}
.ulke-alt .ua-ik svg{width:.9rem; height:.9rem}
.ulke-alt > span{flex:1 1 auto; min-width:0}
.ulke-alt b{font-weight:800; color:var(--ink)}
.ulke-alt .pay{color:var(--p-600); font-size:.9rem; letter-spacing:-.03em}

/* --- Kart altı tek satır yorum --- */
.stat .yorum{display:inline-flex; align-items:center; gap:.3rem; margin-top:.45rem; padding:.22rem .5rem .22rem .42rem; border-radius:.5rem; background:var(--p-50); color:#8f4a36; font-size:.6rem; font-weight:700; letter-spacing:-.005em; line-height:1.3; max-width:100%}
.stat .yorum svg{width:.62rem; height:.62rem; flex:0 0 auto; color:var(--p-600)}
.stat.ulkeli .yorum{grid-column:1; grid-row:6; justify-self:start}

/* --- Alt bilgi: ekip ve iletişim ---
   Ortalı, sakin bir kart. Kişiler yan yana küçük avatarlarla; mobilde alt alta liste. */
.foot-ekip{background:var(--card); border-radius:var(--r-xl); padding:1.6rem 1.25rem 1.5rem; box-shadow:var(--shadow); text-align:center}
.fe-eyebrow{font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--t-500)}
.foot-ekip h3{margin:.35rem 0 0; font-size:1rem; font-weight:800; letter-spacing:-.032em}
.foot-ekip p{margin:.3rem 0 0; font-size:.8rem; color:var(--muted); font-weight:500}
.fe-kisiler{display:flex; flex-direction:column; align-items:stretch; gap:.35rem; margin:1.15rem auto 0; max-width:22rem}
.fe-kisi{display:flex; align-items:center; gap:.7rem; padding:.5rem .65rem; border-radius:.9rem; background:transparent; border:0; font-family:inherit; color:var(--ink); text-align:left; min-width:0}
.fe-foto{width:2.25rem; height:2.25rem; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:.7rem; font-weight:800; background:var(--p-100); color:#a35b45; flex:0 0 auto}
.fe-foto img{width:100%; height:100%; object-fit:cover; display:block}
.fe-kisi + .fe-kisi .fe-foto{background:var(--t-50); color:var(--t-700)}
.fe-foto.kurum{background:var(--t-900); color:#fff}
.fe-foto.kurum svg{width:1rem; height:1rem}
.fe-yazi{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.fe-yazi b{font-size:.84rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fe-yazi small{font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.12rem}
.fe-kisi.ajans{cursor:pointer; transition:background .2s ease}
.fe-kisi.ajans:hover{background:var(--t-25)}
.fe-ok{width:.85rem; height:.85rem; color:var(--t-300); margin-left:auto; flex:0 0 auto}
.fe-ulas{display:flex; flex-direction:column; gap:.45rem; margin:1.1rem auto 0; max-width:22rem}
.fe-ulas a, .fe-ulas button{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.72rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:.82rem; font-weight:700; text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease}
.fe-ulas a:hover, .fe-ulas button:hover{background:var(--t-25); border-color:var(--t-100)}
.fe-ulas svg{width:1rem; height:1rem; color:var(--t-500)}
.fe-ulas .wa{background:#128c4b; border-color:#128c4b; color:#fff}
.fe-ulas .wa svg{color:#fff}
.fe-ulas .wa:hover{background:#0f7a41; border-color:#0f7a41}
@media (min-width:46rem){
  .foot-ekip{padding:1.9rem 2rem 1.75rem}
  .fe-kisiler{flex-direction:row; justify-content:center; gap:.5rem; max-width:none}
  .fe-kisi{padding:.45rem .9rem .45rem .5rem; border-radius:999px; background:var(--t-25)}
  .fe-kisi.ajans:hover{background:var(--t-50)}
  .fe-ok{margin-left:.1rem}
  .fe-ulas{flex-direction:row; justify-content:center; max-width:none}
  .fe-ulas a, .fe-ulas button{padding:.65rem 1.05rem}
}

/* --- Sağ altta geri bildirim balonu --- */
.gb-balon{position:fixed; right:max(1rem, env(safe-area-inset-right)); bottom:calc(5.4rem + env(safe-area-inset-bottom)); z-index:58; width:min(17.5rem, calc(100vw - 2rem)); background:var(--card); border-radius:1.15rem; padding:.95rem 2.2rem .9rem 1rem; box-shadow:0 18px 44px -14px rgba(5,55,60,.45), 0 0 0 1px var(--line-soft); transform:translateY(1rem); opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease}
.gb-balon.goster{transform:none; opacity:1}
.gb-balon b{display:block; font-size:.86rem; font-weight:800; letter-spacing:-.025em}
.gbb-kapat{position:absolute; right:.45rem; top:.45rem; width:1.5rem; height:1.5rem; border:0; border-radius:50%; background:transparent; color:var(--muted-2); display:grid; place-items:center; cursor:pointer}
.gbb-kapat:hover{background:var(--t-25); color:var(--ink)}
.gbb-kapat svg{width:.75rem; height:.75rem}
.gbb-sec{display:flex; gap:.4rem; margin-top:.65rem}
.gbb-sec button{display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:.76rem; font-weight:700; cursor:pointer; transition:transform .15s ease, background .2s ease}
.gbb-sec button svg{width:.85rem; height:.85rem}
.gbb-sec .evet{background:var(--t-900); border-color:var(--t-900); color:#fff}
.gbb-sec button:hover{transform:translateY(-1px)}
.gbb-tesekkur{display:block; margin-top:.5rem; font-size:.78rem; font-weight:600; color:var(--on)}
.gb-balon [hidden]{display:none}
@media (min-width:64rem){ .gb-balon{bottom:1.5rem} }
@media print{ .gb-balon{display:none} }

/* --- Google'da görünme (Search Console) --- */
/* Web alt kutuları (mobil): sütun sarmalayıcıları yok sayılır, sıra: şehirler, Google, sayfalar, kaynaklar */
.web-kutular{display:flex; flex-direction:column}
.web-kutular .kol{display:contents}
.web-kutular .k-ulke{order:1} .web-kutular .k-sehir{order:2} .web-kutular .k-sayfalar{order:3} .web-kutular .k-halka{order:4} .web-kutular .k-gsc{order:5}
.card.gsc{padding:1.1rem 1.2rem 1rem}
.gsc-ozet{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.9rem .8rem; margin-bottom:.35rem}
.gsc-kalem{display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; min-width:0}
.gsc-kalem .l{font-size:.68rem; font-weight:600; color:var(--muted); line-height:1.3; min-height:2.6em}
.gsc-kalem .v{font-size:1.32rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.gsc-kalem .v small{font-size:.66rem; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:.16em}
.gsc-baslik{
  font-size:.64rem; font-weight:700; color:var(--muted-2); letter-spacing:.09em; text-transform:uppercase;
  margin:1.1rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--line-soft);
}
.gsc-sorgular{display:flex; flex-direction:column}
.gsc-sorgular .q{display:flex; align-items:center; gap:.8rem; padding:.5rem 0; border-top:1px solid var(--line-soft)}
.gsc-sorgular .q:first-child{border-top:0}
.gsc-sorgular .t{flex:1 1 auto; min-width:0; font-size:.84rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gsc-sorgular .t::before{content:'"'; color:var(--muted-2)} .gsc-sorgular .t::after{content:'"'; color:var(--muted-2)}
.gsc-sorgular .n{flex:0 0 auto; font-size:.88rem; font-weight:700; letter-spacing:-.03em}
.gsc-sorgular .n small{font-size:.66rem; font-weight:500; color:var(--muted); letter-spacing:0}
@media (max-width:22rem){ .gsc-ozet{grid-template-columns:1fr 1fr} }

/* ---------- Alt bilgi ---------- */
.foot{margin-top:2.6rem; text-align:center}
.foot h3{margin:0 0 .37rem; font-size:.97rem; font-weight:800; letter-spacing:-.032em}
.foot p{margin:0; font-size:.81rem; color:var(--muted); line-height:1.65; font-weight:500}
.foot a{color:var(--t-500); text-decoration:none; font-weight:700}
.next{margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--t-500); background:var(--t-50); padding:.5rem .94rem; border-radius:999px; font-weight:600}
.sig{margin-top:1.6rem; display:flex; flex-direction:column; align-items:center; gap:.56rem; padding-bottom:.5rem}
.sig .by{font-size:.69rem; color:var(--muted-2); font-weight:500}

/* ---------- Giriş hareketi ---------- */
.rise{opacity:0; transform:translate3d(0,14px,0); transition:opacity .55s cubic-bezier(.32,.72,0,1), transform .55s cubic-bezier(.32,.72,0,1)}
.rise.in{opacity:1; transform:none}

/* ==========================================================================
   AYIN İÇERİĞİ — yönetici notu
   Hero kartın altında, ajansın o içerik hakkındaki kısa yorumu.
   ========================================================================== */
.hero-note{
  margin-top:.75rem;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:1.05rem 1.2rem 1.15rem;
  border-left:3px solid var(--p-500);
}
.hero-note .hn-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem}
.hero-note .hn-head .who{
  width:1.5rem; height:1.5rem; border-radius:50%; flex:0 0 auto;
  background:var(--p-100); color:#a35b45;
  display:grid; place-items:center; font-size:.6rem; font-weight:800;
}
.hero-note .hn-head b{font-size:.75rem; font-weight:700; color:var(--ink-2)}
.hero-note p{margin:0; font-size:.875rem; line-height:1.68; color:var(--ink-2)}

/* ==========================================================================
   MASAÜSTÜ
   Mobil şablon temel; buradan yukarısı genişleyen bir belge.
   Dashboard'a dönüşmüyor — sadece nefes alıyor ve ızgaralar açılıyor.
   ========================================================================== */

/* --- Sol sütun (varsayılan: gizli) --- */
.shell{max-width:var(--wrap); margin:0 auto}

/* --- Orta boy ekran: ızgaralar açılır, düzen hâlâ tek sütun --- */
@media (min-width:46rem){
  .shell{max-width:52rem; padding:0 1.5rem}
  .wrap{max-width:none; padding-left:0; padding-right:0}

  /* Yatay boşluğu .cover-in yönetiyor ki gövdeyle aynı hizada dursun */
  .cover{border-radius:0 0 2.6rem 2.6rem; padding:2.2rem 0 3rem}
  .cover-in{max-width:52rem; padding:0 1.5rem}
  .cover-bar{margin-bottom:2.4rem}
  .cover-grid{grid-template-columns:minmax(0,1fr) 20rem; gap:2rem; align-items:end}
  .cover h1{font-size:2.5rem}
  .cover-meta{padding:.45rem 1.2rem .5rem}
  .cm-row{font-size:.82rem; padding:.74rem 0}

  .summary{margin-top:-2rem}
  .sum-cell{padding:1.7rem .75rem 1.5rem}
  .sum-cell .v{font-size:1.9rem}
  .sum-cell .l{font-size:.78rem}
  /* Not metni kartın tamamını kullansın — sağda boşluk kalmasın. */
  .note p{max-width:none}

  /* Dört sayı yan yana */
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats.ulkeli{grid-template-columns:1.6fr repeat(var(--diger, 3), minmax(0,1fr))}
  .stat.ulkeli{grid-column:auto}
  .stats.ulkeli .stat:last-child:nth-child(even){grid-column:auto}
  .stat{min-height:8rem}

  /* Ayın içeriği: görsel solda, bilgi sağda */
  .hero-post{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero-post .thumb{aspect-ratio:auto; min-height:15rem}
  .hero-post .body{padding:1.75rem; display:flex; flex-direction:column; justify-content:center}
  .hero-post .title{font-size:1.06rem; margin-bottom:1.15rem}

  .mini-grid{grid-template-columns:repeat(4,1fr)}

  /* Web: iki kart yan yana */
  .duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.15rem; align-items:start}
  /* Web alt kutuları: iki bağımsız sütun, kutular kendi sütununda alt alta */
  .web-kutular{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 1.15rem; align-items:start}
  .web-kutular.tek{grid-template-columns:minmax(0,1fr)}
  .web-kutular .kol{display:flex; flex-direction:column; min-width:0}
  .web-kutular .kutu{order:0}
  .web-kutular .kutu > .blockhead{margin-top:1.6rem}
  .duo.tek{grid-template-columns:1fr}
  .duo > div > .blockhead{margin-top:1.6rem}

  .sec-head h2{font-size:1.32rem}
  .section{margin-top:3rem}
}

/* --- Masaüstü: sol sütun açılır --- */
@media (min-width:64rem){
  .shell{
    max-width:70rem; padding:0 2rem;
    display:grid; grid-template-columns:16.5rem minmax(0,1fr); gap:2.75rem;
    align-items:start;
  }
  .cover-in{max-width:70rem; padding:0 2rem}
  .cover{padding:2.2rem 0 3.6rem; border-radius:0 0 3rem 3rem}
  .cover-bar{margin-bottom:3rem}
  .cover-grid{grid-template-columns:minmax(0,1fr) 23rem; gap:3rem}
  .cover h1{font-size:3.3rem; letter-spacing:-.045em; max-width:14ch}
  .cover .range{font-size:.98rem}
  .cover .eyebrow{font-size:.72rem}


  /* Sol sütun bunları taşıdığı için altta tekrar etmesin */
  .foot .contact, .foot .next{display:none}
  .foot{margin-top:3.2rem}

  /* Alt menü ekranın değil, İÇERİK SÜTUNUNUN ortasına hizalanır.
     Sol sütun soldan yer kapladığı için içeriğin ortası ekranın ortasından
     (sütun + boşluk) / 2 kadar sağda kalıyor.
     Kaydırma margin ile yapılıyor; transform'u panel açılışı kullanıyor. */
  .tabbar{
    left:50%; right:auto; width:25rem;
    margin:0 0 0 calc(-12.5rem + (16.5rem + 2.75rem) / 2);
  }

}

/* --- Dar masaüstü (sol sütun açık ama içerik 640–800px): ülke listeli
   ziyaretçi kartı üç dar kartla yan yana sığmaz. Ziyaretçi tam satır, diğerleri
   altında eşit üç sütun. 76rem'den sonra 1.6 : 1 dağılıma dönülür. --- */
@media (min-width:64rem) and (max-width:75.99rem){
  .stats.ulkeli{grid-template-columns:repeat(3, minmax(0,1fr))}
  .stat.ulkeli{grid-column:1/-1}
}

/* --- Çok geniş ekran --- */
@media (min-width:90rem){
  .shell{max-width:76rem; gap:3.5rem}
  .cover-in{max-width:76rem}
}

/* ==========================================================================
   ERİŞİLEBİLİRLİK (§14) — üç ayrı sinyal
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  .row .bar i, .seg i, .sy .cizgi i, .sehir-cubuk i{transform:scaleX(1); transition:none}
  .tabbar a{transition:color .15s ease, opacity .12s ease}
  .tabbar a.pressed{transform:none; opacity:.6}
}
@media (prefers-reduced-transparency:reduce){
  .tabbar{
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 0 0 1px var(--line), 0 12px 28px -14px rgba(5,55,60,.45);
  }
  .tag,.kind{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(5,55,60,.86)}
}
@media (prefers-contrast:more){
  :root{--muted:#4b5c60; --muted-2:#5d6e72}
  .card,.stat,.mini{border:1px solid var(--t-200)}
  .tabbar{
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 0 0 1.5px var(--t-500), 0 12px 28px -14px rgba(5,55,60,.45);
  }
  .tabbar a{color:var(--t-900)}
  .chip.good{background:#fff; border:1px solid var(--good)}
  .chip.bad{background:#fff; border:1px solid var(--bad)}
}

@media (max-width:22rem){
  .stat .v{font-size:1.44rem}
  .stat .kirilim b{font-size:1.18rem}
  .metrics{gap:1rem}
}

/* ---------- Yazdırma / PDF ---------- */
/* ==========================================================================
   YAZDIR / PDF — A4 dikey. Ekran süsleri kalkar, kartlar bölünmez, renkler basılır.
   ========================================================================== */
@page{size:A4; margin:12mm 11mm 14mm}
@media print{
  html{font-size:92%}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  body,#app{background:#fff}
  /* Etkileşim ögeleri: sekme çubuğu, yan panel, kulp, perde, balon, formlar, yardım */
  .tabbar,.rail,.rail-kulp,.rail-fon,.perde,.gb-balon,.yapisik,.notlar,.geri-bildirim,.paylas-modal,.ajans-modal,
  .yardim,.yardim-pop,.geri-don,.foot-geri,.cm-nav,.onizleme-serit,.fe-ulas,.yap-devam,.diger-pop,.rail-islem{display:none !important}
  .shell{display:block; max-width:none; padding:0}
  .wrap{padding:0 0 .5rem}
  /* Animasyonla gelenler baştan görünür */
  .rise,.card{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important}
  .row .bar i,.seg i,.sy .cizgi i,.sehir-cubuk i,.us-bar i{transform:scaleX(1) !important}
  .yapilanlar li.gizli{display:flex}
  /* Kapak: kâğıtta yumuşak, köşesiz, sayfanın başında */
  .cover{border-radius:.9rem; break-after:avoid}
  /* Kartlar ve bölümler bölünmesin, sayfa başında başlık yalnız kalmasın */
  .card,.mini,.stat,.iplik-kart,.foot-ekip{box-shadow:none !important; border:1px solid var(--line); break-inside:avoid}
  .section{break-inside:auto}
  .section-head,.blockhead,h2,h3{break-after:avoid}
  .stats,.duo{break-inside:avoid}
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Web alt kutuları: kâğıtta tek sütun akar, her kutu bütün kalır, sayfa boşluğu kalmaz */
  .web-kutular{display:block}
  .web-kutular .kol{display:block}
  .web-kutular .kutu{break-inside:avoid; display:block; margin-bottom:.9rem}
  .web-kutular .kutu > .blockhead{margin-top:.2rem}
  .card.ulke,.card.sehir,.card.sayfalar,.card.halka,.card.gsc{max-width:none}
  /* Notlar: sarı arka planlı kart kâğıtta açık gri çerçeve */
  .note{break-inside:avoid}
  /* Alt bilgi: ekip kalır, düğmeler kalkar, imza küçük */
  .foot{margin-top:1.4rem}
  .foot-ekip{text-align:left; padding:1rem 1.1rem}
  .fe-kisiler{justify-content:flex-start}
  .foot .next{display:inline-flex}
  .sig{margin-top:.8rem}
  /* Bağlantı adresleri basılmasın */
  a{color:inherit; text-decoration:none}
  a[href]::after{content:none}
}

/* Önizleme şeridi — yalnızca ajans kullanıcısına görünür */
.onizleme-serit{
  background:var(--t-900); color:#fff;
  font-size:.75rem; font-weight:600; letter-spacing:-.005em;
  padding:.6rem 1.125rem; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap;
}
.onizleme-serit a{color:var(--p-500); font-weight:700; text-decoration:none}
.onizleme-serit a:hover{text-decoration:underline}
@media print{ .onizleme-serit{display:none} }

/* ==========================================================================
   SİZİN NOTLARINIZ  —  müşteri ↔ hesap yöneticisi yazışması
   Yönetici notunun hemen altında yaşar. Üç parça:
     1) Yazışma kartları — avatarlı, balonlu, durumu tepede
     2) Davetiye        — "soru sorun" (tam boy) / "bir not daha" (sade)
     3) Yazma formu     — davetiye tıklanınca açılır
   Üstteki yönetici notu da card-2 zemininde; aynı zemini sürdürüp yalnızca
   ince bir ayraçla ayırıyoruz ki kart ikiye bölünmüş gibi durmasın.
   ========================================================================== */
.notlar{
  background:var(--card-2); border-top:1px solid var(--line-soft);
  padding:1rem 1.15rem 1.15rem;
  border-radius:0 0 var(--r-xl) var(--r-xl);
}
.card > .note:first-child{border-radius:var(--r-xl) var(--r-xl) 0 0}
.card > .note:first-child:last-child{border-radius:var(--r-xl)}

.notlar-baslik{
  display:flex; align-items:center; gap:.42rem;
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 .7rem .1rem;
}
.notlar-baslik svg{width:.88rem; height:.88rem; flex:0 0 auto}
.nb-adet{
  min-width:1.05rem; height:1.05rem; padding:0 .28rem; border-radius:999px;
  background:var(--t-100); color:var(--t-700);
  font-size:.6rem; font-weight:800; letter-spacing:0;
  display:inline-grid; place-items:center;
}

/* ---------- Bir yazışma ---------- */
.iplik-kart{
  background:var(--card); border-radius:1.15rem;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  overflow:hidden; margin-bottom:.7rem;
}
/* Cevap gelmiş yazışma şeftali çerçeveyle öne çıkar */
.iplik-kart.answered{box-shadow:inset 0 0 0 1px var(--p-100)}
.iplik-kart.closed{opacity:.9}

/* Durum şeridi kartın kendi zemininde kalır; card-2 verilseydi .notlar
   zeminiyle aynı renk olup kartın dışına taşmış gibi dururdu. */
.ik-tepe{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .8rem .55rem .7rem;
  border-bottom:1px solid var(--line-soft);
}
.rozet{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.65rem; font-weight:800; letter-spacing:.015em;
  padding:.27rem .6rem .27rem .48rem; border-radius:999px;
}
.rozet svg{width:.8rem; height:.8rem; flex:0 0 auto}
.rozet.bekliyor{background:#fbf0e4; color:#8f6132}
.rozet.ok{background:var(--good-bg); color:var(--good)}
.rozet.kapali{background:var(--flat-bg); color:var(--muted)}
.ik-panel{
  margin-left:auto; display:inline-flex; align-items:center; gap:.15rem;
  font-size:.72rem; font-weight:700; color:var(--t-500); text-decoration:none;
  padding:.2rem .1rem .2rem .3rem; border-radius:.5rem;
}
.ik-panel:hover{color:var(--t-700); text-decoration:underline}
.ik-panel svg{width:.72rem; height:.72rem}

/* ---------- Mesajlar ---------- */
.ik-akis{padding:.85rem .9rem .95rem}

/* "Önceki mesajları göster": eskiden kartın tam genişliğinde, alt çizgili
   bir şeritti; artık akışın içinde küçük bir hap. */
.ik-akis .gecmis-ac{
  width:auto; padding:.32rem .72rem .32rem .5rem; margin:0 0 .8rem;
  border:0; border-radius:999px;
  background:var(--card-2); color:var(--muted); font-size:.7rem;
}
.ik-akis .gecmis-ac:hover{background:var(--t-25); color:var(--t-700)}

/* Avatar + gövde. Avatarlar arasındaki ince dikey çizgi yazışmayı
   tek bir iplik gibi okutuyor. */
.ik-mesaj{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem; position:relative}
.ik-mesaj + .ik-mesaj{margin-top:.8rem}
.ik-mesaj::before{
  content:""; position:absolute; left:.94rem; top:2.3rem; bottom:-.8rem;
  width:1.5px; border-radius:1px; background:var(--line-soft);
}
/* Çizgi son mesajın altında sürmesin — ama geçmiş kutusunun içindekiler
   bir sonraki mesaja bağlanmaya devam etsin. */
.ik-akis > .ik-mesaj:last-child::before{content:none}
.ik-akis > .gecmis{margin-bottom:.8rem}
.ik-av{
  width:1.95rem; height:1.95rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; position:relative; z-index:1;
  font-size:.6rem; font-weight:800; letter-spacing:.01em;
}
.ik-av.siz{background:var(--t-50); color:var(--t-500)}
.ik-av.ajans{background:var(--p-100); color:#a35b45}

.ik-govde{min-width:0}
.ik-ust{
  display:flex; align-items:center; gap:.42rem; flex-wrap:wrap;
  min-height:1.95rem; margin-bottom:.15rem;
}
.ik-kim{font-size:.76rem; font-weight:700; letter-spacing:-.015em; color:var(--ink)}
.ik-rol{
  font-size:.62rem; font-weight:700; letter-spacing:.01em;
  color:#a35b45; background:var(--p-100);
  padding:.13rem .42rem; border-radius:999px;
}
.ik-tarih{font-size:.66rem; color:var(--muted-2); font-weight:500; margin-left:auto}

/* Konuşma balonu: üst-sol köşe küçük, yani sahibine bakıyor */
.ik-balon{
  border-radius:.3rem .95rem .95rem .95rem;
  padding:.6rem .78rem;
  font-size:.845rem; line-height:1.62; color:var(--ink-2);
  overflow-wrap:anywhere;
}
/* Balonlar beyaz kartın içinde duruyor; ayrıca çerçeve verilirse kutu
   içinde kutu görüntüsü oluşuyor. Renk tek başına yeter ve avatarla aynı
   aileden: siz teal, hesap yöneticiniz şeftali. */
.ik-mesaj.client .ik-balon{background:var(--t-25)}
.ik-cevap-notu{margin-top:.45rem; font-size:.78rem; line-height:1.55; color:var(--ink-2); padding:.45rem .7rem; border-radius:.7rem; background:var(--p-50)}
.ik-cevap-notu b{color:#a35b45; font-weight:800}
.ik-tepe .ik-tarih{margin-left:auto}
.ik-mesaj.agency .ik-balon{background:var(--p-50)}

/* ---------- Davetiye ----------
   Eskiden burada gri bir şeridin içinde küçük bir hap vardı; ne davet
   ediyordu ne de tıklanacak bir nesne gibi duruyordu. Şimdi tam genişlikte,
   kesik çerçeveli tek bir nesne: solda simge, ortada ne olduğu, sağda artı. */
.soru-ac{
  display:flex; align-items:center; gap:.72rem; width:100%; text-align:left;
  font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--card); border:1.5px dashed var(--t-200); border-radius:1.15rem;
  padding:.8rem .85rem;
  transition:border-color .18s, background-color .18s, box-shadow .18s,
             transform .13s cubic-bezier(.2,.7,.3,1);
}
.soru-ac:hover{border-color:var(--t-400); background:var(--t-25); box-shadow:0 8px 20px -14px rgba(5,55,60,.5)}
.soru-ac:focus-visible{outline:none; border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50)}
.soru-ac.pressed{transform:scale(.985)}
.sa-ik{
  width:2.1rem; height:2.1rem; border-radius:.72rem; flex:0 0 auto;
  display:grid; place-items:center; background:var(--t-50); color:var(--t-500);
  transition:background-color .18s;
}
.sa-ik svg{width:1.02rem; height:1.02rem}
.soru-ac:hover .sa-ik{background:var(--t-100)}
.sa-yazi{display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1 1 auto}
.sa-yazi b{font-size:.83rem; font-weight:700; letter-spacing:-.015em; color:var(--ink)}
.sa-yazi small{font-size:.72rem; font-weight:500; color:var(--muted); line-height:1.45}
.sa-arti{
  width:1.72rem; height:1.72rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:var(--t-500); color:#fff;
  transition:background-color .18s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.sa-arti svg{width:.82rem; height:.82rem}
.soru-ac:hover .sa-arti{background:var(--t-700); transform:scale(1.07)}

/* Zaten yazışma varken davetiye sesini kısar */
.soru-ac.ince{background:transparent; padding:.6rem .75rem}
.soru-ac.ince .sa-ik{width:1.75rem; height:1.75rem; border-radius:.6rem}
.soru-ac.ince .sa-ik svg{width:.88rem; height:.88rem}
.soru-ac.ince .sa-yazi b{font-size:.79rem; color:var(--t-700)}
.soru-ac.ince .sa-arti{width:1.5rem; height:1.5rem; background:var(--t-50); color:var(--t-500)}
.soru-ac.ince:hover .sa-arti{background:var(--t-500); color:#fff}

.notlar.acik .soru-ac{display:none}

/* ---------- Yazma formu ---------- */
.not-form{
  background:var(--card); border-radius:1.15rem;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  padding:.85rem .9rem .95rem;
}
.nf-tepe{display:flex; align-items:center; gap:.58rem; margin-bottom:.65rem}
.nf-baslik{min-width:0}
.nf-baslik label{
  display:block; font-size:.79rem; font-weight:700; letter-spacing:-.015em;
  color:var(--ink); text-transform:none;
}
.nf-baslik small{font-size:.69rem; color:var(--muted); font-weight:500}
.not-form textarea{
  width:100%; font-family:inherit; font-size:.875rem; line-height:1.6;
  color:var(--ink); background:var(--card-2); border:1.5px solid var(--line);
  border-radius:.95rem; padding:.7rem .85rem; resize:vertical; outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.not-form textarea:focus{background:var(--card); border-color:var(--t-500); box-shadow:0 0 0 4px var(--t-50)}
.not-form textarea::placeholder{color:var(--muted-2)}

.not-alt{display:flex; align-items:center; gap:.5rem; margin-top:.6rem; flex-wrap:wrap}
.not-alt .sp{flex:1 1 auto}
.nf-sayac{
  font-size:.68rem; font-weight:600; color:var(--muted-2);
  font-variant-numeric:tabular-nums; padding-left:.15rem;
}
.nf-sayac.dolmak-uzere{color:var(--bad)}

.btn-yalin{
  font-family:inherit; font-size:.78rem; font-weight:600; color:var(--muted);
  background:transparent; border:0; cursor:pointer; padding:.45rem .6rem; border-radius:999px;
}
.btn-yalin:hover{color:var(--ink-2); background:var(--card-2)}
.btn-gonder{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:-.01em;
  color:#fff; background:var(--t-500); border:0; cursor:pointer;
  padding:.5rem 1rem .5rem .85rem; border-radius:999px;
  transition:background-color .15s, transform .11s cubic-bezier(.2,.7,.3,1), opacity .15s;
}
.btn-gonder svg{width:.85rem; height:.85rem; flex:0 0 auto}
.btn-gonder:hover{background:var(--t-700)}
.btn-gonder:active{transform:scale(.96)}
.btn-gonder[disabled]{background:var(--t-300); cursor:default; opacity:.7}
.btn-gonder[disabled]:hover{background:var(--t-300)}

/* ---------- Not gönderildi bildirimi ---------- */
.not-tamam{
  display:flex; align-items:flex-start; gap:.65rem;
  background:var(--good-bg); border-radius:1.1rem;
  padding:.78rem .9rem; margin:0 0 .85rem;
}
.nt-ik{
  width:1.5rem; height:1.5rem; border-radius:50%; flex:0 0 auto;
  background:#fff; color:var(--good); display:grid; place-items:center;
}
.nt-ik svg{width:.82rem; height:.82rem}
.nt-yazi b{display:block; font-size:.81rem; font-weight:700; color:var(--good); letter-spacing:-.015em}
.nt-yazi span{display:block; font-size:.74rem; font-weight:500; color:#0c6a55; line-height:1.5; margin-top:.1rem}

/* Yeni eklenen nota dönünce kısa bir vurgu */
.notlar:target .iplik-kart:last-of-type,
.notlar.vurgu .iplik-kart:last-of-type{
  box-shadow:inset 0 0 0 2px var(--t-300);
}

/* Çapayla dönüşte üst çubuk/menü içeriği kapatmasın */
.notlar{scroll-margin-top:1.5rem; scroll-margin-bottom:6rem}

/* Dar ekranda avatarlar ve boşluklar biraz daralsın */
@media (max-width:24rem){
  .notlar{padding:.9rem .85rem 1rem}
  .ik-akis{padding:.75rem .7rem .85rem}
  .ik-mesaj{gap:.5rem}
  .soru-ac{gap:.6rem; padding:.72rem .7rem}
}

@media print{ .notlar{display:none} }

/* ==========================================================================
   KAYDIRMA SIRASINDA
   backdrop-filter, altından geçen içerik her değiştiğinde yeniden
   hesaplanır — kaydırırken bu her karede olur ve takılmanın ana sebebidir.
   Kaydırma sürerken bulanıklığı bırakıp düz bir zemine geçiyoruz; göz
   hareket hâlindeyken farkı seçmiyor, kaydırma bitince geri geliyor.
   ========================================================================== */
.kayiyor .tabbar{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(255,255,255,.95);
}

/* ==========================================================================
   GERİ DÖNÜŞ
   Rapor bağımsız paylaşılabilir bir sayfa; bağlantıyla gelen için dönülecek
   bir yer yok. Ama kendi hesabıyla giren müşteri kapana kısılmamalı —
   üç yerde çıkış var: kapakta, masaüstü sol sütununda ve raporun sonunda.
   ========================================================================== */
.geri-don{
  /* flex (inline-flex değil): kendi satırında dursun, logoyla yan yana gelmesin */
  display:flex; width:fit-content; align-items:center; gap:.34rem;
  font-size:.78rem; font-weight:700; letter-spacing:-.01em;
  color:rgba(255,255,255,.72); text-decoration:none;
  background:rgba(255,255,255,.1);
  padding:.46rem .9rem .46rem .66rem; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color .15s, color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
  transition:background-color .15s, color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.geri-don:hover{background:rgba(255,255,255,.18); color:#fff}
.geri-don:active{transform:scale(.97)}
.geri-don svg{width:.85rem; height:.85rem; flex:0 0 auto}
.geri-don:focus-visible{outline:2px solid var(--p-500); outline-offset:2px}

/* Raporun sonu — uzun sayfada yukarı çıkmaya gerek kalmasın */
.foot-geri{
  display:inline-flex; align-items:center; gap:.42rem;
  font-size:.84rem; font-weight:700; letter-spacing:-.015em;
  color:var(--t-500); text-decoration:none;
  background:var(--card); box-shadow:var(--shadow);
  padding:.7rem 1.15rem .7rem .95rem; border-radius:999px;
  margin-top:1.15rem;
  transition:background-color .15s, color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.foot-geri:hover{background:var(--t-25); color:var(--t-700)}
.foot-geri:active{transform:scale(.98)}
.foot-geri svg{width:.9rem; height:.9rem; flex:0 0 auto}

@media print{ .geri-don, .foot-geri, .cm-nav{display:none} }

/* ---------- Geçmiş mesajlar ---------- */
.gecmis-ac{
  display:inline-flex; align-items:center; gap:.35rem; width:100%;
  font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:-.005em;
  color:var(--muted); background:transparent; border:0; cursor:pointer;
  padding:.6rem 1.05rem; text-align:left;
  border-bottom:1px solid var(--line-soft);
  transition:color .15s, background-color .15s;
}
.gecmis-ac:hover{color:var(--ink-2); background:var(--card-2)}
.gecmis-ac svg{width:.8rem; height:.8rem; flex:0 0 auto; transition:transform .2s ease}
.gecmis-ac.acik svg{transform:rotate(180deg)}

/* ==========================================================================
   YAPIŞKAN ÜST ÇUBUK
   Kapak ekrandan çıkınca yukarıdan iner: geri, müşteri + dönem, ay geçişi.
   Kapak görünürken gizli — aynı bilgiyi iki kez göstermeyelim.
   Zemin kapakla aynı koyu teal: çubuk, kapağın sıkıştırılmış hâli gibi okunur.
   ========================================================================== */
.yapisik{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding-top:env(safe-area-inset-top);
  background:rgba(5,55,60,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:#fff;
  box-shadow:0 8px 28px -18px rgba(5,55,60,.7);
  transform:translate3d(0,-100%,0); visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
}
.yapisik.gorunur{transform:none; visibility:visible; transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s}
.kayiyor .yapisik{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(5,55,60,.97)}
.yapisik-in{
  max-width:var(--wrap); margin:0 auto; padding:0 .9rem 0 .6rem; height:3.4rem;
  display:flex; align-items:center; gap:.6rem;
}
.y-geri{
  width:2.15rem; height:2.15rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.1); transition:background-color .15s;
}
.y-geri:hover{background:rgba(255,255,255,.2)}
.y-geri svg{width:1rem; height:1rem}
.y-baslik{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; line-height:1.15}
.y-baslik b{font-size:.86rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.y-baslik span{font-size:.68rem; font-weight:600; color:rgba(255,255,255,.62)}
.y-nav{display:flex; gap:.35rem; flex:0 0 auto}
.y-nav a, .y-nav .yok{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.74rem; font-weight:700; color:#fff; text-decoration:none;
  padding:.42rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.y-nav a:hover{background:rgba(255,255,255,.2)}
.y-nav a:active{transform:scale(.96)}
.y-nav a svg{width:.78rem; height:.78rem; flex:0 0 auto}
.y-nav .yok{display:none}
.y-giris{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem .42rem .65rem; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,.14); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:background .2s ease;
}
.y-giris:hover{background:rgba(255,255,255,.24)}
.y-giris svg{width:.85rem; height:.85rem; flex:0 0 auto}
.y-giris .kisa{display:none}
@media (max-width:46rem){ .y-giris .uzun{display:none} .y-giris .kisa{display:inline} }
/* Çok dar ekranda ay adları sığmaz: sadece oklar kalsın */
@media (max-width:22rem){ .y-nav a span{display:none} .y-nav a{padding:.42rem .55rem} }
@media (min-width:46rem){
  .yapisik-in{max-width:52rem; padding:0 1.5rem; height:3.6rem; gap:.8rem}
  .y-baslik b{font-size:.92rem}
}
@media (min-width:64rem){ .yapisik-in{max-width:70rem; padding:0 2rem} }
/* Çubuk içerikle çakışmasın: çapayla gelinen bölüm başlığı çubuğun altında kalsın */
.section{scroll-margin-top:4.4rem}
@media (prefers-reduced-motion:reduce){ .yapisik{transition:none} }
@media print{ .yapisik{display:none} }

/* ==========================================================================
   YAN PANEL — masaüstünde sol sütun, mobilde soldan açılan çekmece
   İçindekiler, ekip (yönetici + editör), WhatsApp/ara/e-posta, sonraki
   rapor, yazdır ve bağlantı kopyalama. Tek işaretleme, iki düzen.
   ========================================================================== */
.rail-in{display:grid; gap:.75rem}

.rail-id{display:flex; align-items:center; gap:.75rem; padding:0 .25rem .9rem}
.rail-id-yazi{min-width:0; flex:1 1 auto}
.rail-mark{
  width:2.7rem; height:2.7rem; border-radius:50%; flex:0 0 auto;
  background:var(--t-50); color:var(--t-500);
  display:grid; place-items:center; font-weight:800; font-size:.9rem; letter-spacing:-.03em;
}
.rail-mark.logolu{padding:0; background:#fff; box-shadow:inset 0 0 0 1px var(--line-soft); overflow:hidden}
.rail-mark.logolu img{width:100%; height:100%; object-fit:cover; display:block}
.rail-name{font-size:.94rem; font-weight:800; letter-spacing:-.03em; line-height:1.25}
.rail-period{font-size:.75rem; color:var(--muted); font-weight:500; margin-top:.1rem}
.rail-kapat{
  width:2rem; height:2rem; border-radius:50%; flex:0 0 auto; border:0; cursor:pointer;
  background:var(--card-2); color:var(--muted); display:grid; place-items:center;
}
.rail-kapat svg{width:.9rem; height:.9rem}

.rail-card{background:var(--card); border-radius:1.15rem; box-shadow:var(--shadow); padding:1rem 1.1rem 1.05rem}
.rail-lbl{font-size:.63rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2)}

/* Ekip: fotoğraflı profiller, rol rozeti, tek satır açıklama */
.profil{display:flex; align-items:flex-start; gap:.75rem; margin-top:.9rem}
.profil.bas{margin-top:.75rem}
.p-foto{
  width:2.6rem; height:2.6rem; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:var(--p-100); color:#a35b45; display:grid; place-items:center;
  font-size:.74rem; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line-soft);
}
.profil.bas .p-foto{width:3rem; height:3rem; font-size:.82rem}
.profil:not(.bas) .p-foto{background:var(--t-50); color:var(--t-500)}
.p-foto.fotolu{background:var(--card-2)}
.p-foto img{width:100%; height:100%; object-fit:cover; display:block}
.p-yazi{min-width:0; flex:1 1 auto}
.p-ad{font-size:.9rem; font-weight:800; letter-spacing:-.025em; line-height:1.2}
.p-rol{
  display:inline-block; margin-top:.3rem; font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:999px;
}
.p-rol.yonetici{background:var(--p-100); color:#a35b45}
.p-rol.editor{background:var(--t-50); color:var(--t-700)}
.p-yazi p{margin:.4rem 0 0; font-size:.72rem; line-height:1.45; color:var(--muted); font-weight:500}
.ekip-ajans{
  display:flex; align-items:center; gap:.45rem; margin-top:1rem; padding-top:.8rem;
  border-top:1px solid var(--line-soft); font-size:.7rem; font-weight:700; color:var(--muted);
}
.ekip-ajans svg{width:.9rem; height:.9rem; color:var(--t-300)}

/* Notlardaki yönetici avatarı fotoğraflı olabilir */
.who.fotolu{overflow:hidden; padding:0}
.who.fotolu img{width:100%; height:100%; object-fit:cover; display:block}

/* İletişim: tek büyük WhatsApp eylemi, altında iki ikincil */
.ulas-metin{margin:.55rem 0 .85rem; font-size:.78rem; line-height:1.5; color:var(--muted); font-weight:500}
.ulas-wa{
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(135deg, #1fb56b, #128c4b); color:#fff; text-decoration:none;
  border-radius:1rem; padding:.7rem .8rem .7rem .7rem;
  box-shadow:0 10px 24px -14px rgba(18,140,75,.8);
  transition:transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.ulas-wa:hover{box-shadow:0 14px 30px -14px rgba(18,140,75,.9)}
.ulas-wa:active{transform:scale(.98)}
.ulas-ik{width:2.2rem; height:2.2rem; border-radius:50%; flex:0 0 auto; background:rgba(255,255,255,.18); display:grid; place-items:center}
.ulas-ik svg{width:1.25rem; height:1.25rem}
.ulas-yazi{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.2}
.ulas-yazi b{font-size:.84rem; font-weight:800; letter-spacing:-.015em}
.ulas-yazi small{font-size:.66rem; font-weight:500; color:rgba(255,255,255,.78); margin-top:.15rem}
.ulas-ok{width:.9rem; height:.9rem; flex:0 0 auto; color:rgba(255,255,255,.8)}
.ulas-ikili{display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.5rem}
.ulas-ikili a{
  display:flex; align-items:center; gap:.5rem; min-width:0;
  text-decoration:none; color:var(--t-800, var(--t-700));
  background:var(--card-2); border:1px solid var(--line-soft); border-radius:.9rem;
  padding:.6rem .7rem; transition:background-color .15s, border-color .15s;
}
.ulas-ikili a:hover{background:var(--t-25); border-color:var(--t-100)}
.ulas-ikili svg{width:1rem; height:1rem; flex:0 0 auto; color:var(--t-500)}
.ulas-ikili span{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.ulas-ikili b{font-size:.78rem; font-weight:700}
.ulas-ikili small{font-size:.62rem; color:var(--muted); font-weight:500; margin-top:.1rem; line-height:1.3; letter-spacing:-.01em}

.rail-next{display:flex; align-items:center; gap:.7rem; background:var(--t-25); border-radius:1.15rem; padding:.85rem 1rem}
.rail-next svg{width:1.15rem; height:1.15rem; flex:0 0 auto; color:var(--t-400)}
.rail-next b{display:block; font-size:.81rem; font-weight:700; letter-spacing:-.02em; margin-top:.12rem}

.rail-islem{display:grid; gap:.45rem}

/* --- Yan panel, sade sürüm: ekip satırları, ajans düğmesi, ulaşım, sonraki rapor --- */
.kisi{display:flex; align-items:center; gap:.65rem; margin-top:.75rem}
.k-foto{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; letter-spacing:.02em;
  background:var(--p-50); color:#a35b45;
}
.kisi + .kisi .k-foto{background:var(--t-50); color:var(--t-700)}
.k-foto.fotolu{background:var(--card-2)}
.k-foto img{width:100%; height:100%; object-fit:cover; display:block}
.k-yazi{min-width:0; line-height:1.2}
.k-yazi b{display:block; font-size:.88rem; font-weight:800; letter-spacing:-.02em}
.k-yazi span{display:block; font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.15rem}
.ekip-ajans{
  display:flex; align-items:center; gap:.45rem; width:100%; margin-top:.95rem; padding:.7rem .75rem;
  border:0; border-radius:.85rem; background:var(--t-25); color:var(--t-900); cursor:pointer; text-align:left;
  font-weight:600; font-size:.74rem; line-height:1.2; font-family:inherit; transition:background .2s ease;
}
.ekip-ajans:hover{background:var(--t-50)}
.ekip-ajans svg{width:.95rem; height:.95rem; color:var(--t-400); flex:0 0 auto}
.ekip-ajans span{flex:1 1 auto; min-width:0}
.ekip-ajans .ok{width:.8rem; height:.8rem; color:var(--t-500); transition:transform .2s ease}
.ekip-ajans:hover .ok{transform:translateX(2px)}
.ulas .ulas-ikili{margin-top:.75rem; grid-template-columns:1fr}
.ulas-ikili a, .ulas-ikili button{
  display:flex; align-items:center; gap:.5rem; padding:.7rem .75rem; border-radius:.9rem; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none; cursor:pointer; text-align:left; font-family:inherit;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.ulas-ikili a:hover, .ulas-ikili button:hover{background:var(--t-25); border-color:var(--t-100); transform:translateY(-1px)}
.ulas-ikili svg{width:1.05rem; height:1.05rem; flex:0 0 auto; color:var(--t-500)}
.ulas-ikili .wa svg{color:#128c4b}
.ulas-ikili span{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.ulas-ikili b{font-size:.78rem; font-weight:800; letter-spacing:-.01em}
.ulas-ikili small{font-size:.62rem; color:var(--muted); font-weight:500; margin-top:.12rem}
.rail-next{display:block; background:var(--card); box-shadow:var(--shadow); border-radius:1.15rem; padding:.95rem 1.1rem}
.rail-next b{display:block; font-size:1.05rem; font-weight:800; letter-spacing:-.03em; margin-top:.3rem; color:var(--t-900)}
.rail-next small{display:block; font-size:.66rem; color:var(--muted); font-weight:500; margin-top:.15rem}

/* Ajans modalı */
.ajans-modal{border:0; padding:0; background:transparent; max-width:min(26rem, calc(100vw - 2rem)); width:100%}
.ajans-modal::backdrop{background:rgba(5,55,60,.45); backdrop-filter:blur(4px)}
.am-in{position:relative; background:var(--card); border-radius:1.4rem; padding:1.6rem 1.5rem 1.4rem; box-shadow:0 30px 80px rgba(5,55,60,.35)}
.am-kapat{position:absolute; top:.9rem; right:.9rem; width:2rem; height:2rem; border-radius:50%; border:0; background:var(--t-25); color:var(--t-700); cursor:pointer; display:grid; place-items:center}
.am-kapat svg{width:.95rem; height:.95rem}
.am-kapat:hover{background:var(--t-50)}
.am-logo{display:inline-flex; align-items:center; gap:.3em; font-size:.95rem; font-weight:800; letter-spacing:-.03em; color:var(--t-900)}
.am-logo .sw{display:inline-flex; align-items:center; gap:.2em; padding:.1em .45em; border-radius:999px; background:var(--on); color:#fff; font-size:.8em}
.am-logo .sw i{width:.45em; height:.45em; border-radius:50%; background:#fff; display:inline-block}
.am-eyebrow{margin:1rem 0 .2rem; font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2)}
.am-in h2{margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.035em}
.am-metin{margin:.85rem 0 0; font-size:.86rem; line-height:1.6; color:var(--ink-2)}
.am-rakam{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.1rem}
.am-rakam div{background:var(--t-25); border-radius:.9rem; padding:.7rem .5rem; text-align:center}
.am-rakam b{display:block; font-size:1.15rem; font-weight:800; letter-spacing:-.03em; color:var(--t-900)}
.am-rakam span{display:block; font-size:.64rem; color:var(--muted); font-weight:600; margin-top:.15rem}
.am-kisi{display:flex; align-items:center; gap:.65rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line-soft); flex-wrap:wrap}
.am-kisi .k-foto{background:var(--t-50); color:var(--t-700)}
.am-tel{margin-left:auto; display:flex; gap:.4rem}
.am-tel a{font-size:.74rem; font-weight:700; text-decoration:none; padding:.45rem .7rem; border-radius:999px; background:var(--t-25); color:var(--t-900)}
.am-tel a.wa{background:#128c4b; color:#fff}
@media (max-width:26rem){ .am-tel{margin-left:0; width:100%} .am-tel a{flex:1; text-align:center} }
.rail-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:-.015em;
  color:var(--ink-2); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:.65rem 1rem; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s, transform .11s cubic-bezier(.2,.7,.3,1);
}
.rail-btn:hover{background:var(--t-25); border-color:var(--t-200); color:var(--t-700)}
.rail-btn.pressed{transform:scale(.97)}
.rail-btn.tamam{background:var(--good-bg); border-color:transparent; color:var(--good)}
.rail-btn svg{width:.94rem; height:.94rem; flex:0 0 auto}

/* ---------- Mobil: çekmece + kulp ---------- */
.rail-kulp{
  position:fixed; left:0; bottom:calc(5.6rem + env(safe-area-inset-bottom)); z-index:56;
  width:1.35rem; height:2.7rem; border:0; cursor:pointer; padding:0;
  border-radius:0 .9rem .9rem 0;
  background:var(--t-900); color:#fff;
  box-shadow:0 6px 18px -8px rgba(5,55,60,.55), inset -1px 0 0 rgba(255,255,255,.12);
  display:grid; place-items:center;
  opacity:.82;
  transition:width .25s cubic-bezier(.2,.8,.2,1), opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.rail-kulp svg{width:.8rem; height:.8rem; margin-left:-.05rem}
/* Üzerine gelince kenardan kopmaz, sağa doğru genişler */
.rail-kulp:hover, .rail-kulp:focus-visible{width:1.8rem; opacity:1; outline:0}
.rail-fon{
  position:fixed; inset:0; z-index:64; background:rgba(5,55,60,.42);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.rail{
  position:fixed; top:0; bottom:0; left:0; z-index:65;
  width:min(21rem, 86vw); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--bg); padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
  box-shadow:0 0 0 1px var(--line-soft), 24px 0 60px -30px rgba(5,55,60,.5);
  transform:translate3d(-100%,0,0); visibility:hidden;
  transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s linear .34s;
}
html.rail-acik .rail{transform:none; visibility:visible; transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s}
html.rail-acik .rail-fon{opacity:1; pointer-events:auto}
html.rail-acik .rail-kulp{transform:translateX(-100%); opacity:0}
html.rail-acik{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .rail, .rail-fon, .rail-kulp{transition:none} }

/* ---------- Masaüstü: yapışkan sütun ---------- */
@media (min-width:64rem){
  .rail-kulp, .rail-fon, .rail-kapat{display:none}
  .rail{
    position:sticky; top:2rem; bottom:auto; left:auto; z-index:auto;
    width:auto; overflow:visible; background:transparent; padding:2.4rem 0 0;
    box-shadow:none; transform:none; visibility:visible; transition:none;
  }
  html.rail-acik{overflow:auto}
}
@media print{ .rail, .rail-kulp, .rail-fon{display:none} }

/* ---------- İletişim kartı kırılımı: WhatsApp · telefon · e-posta ----------
   Büyük toplamın yerine üç satır: renkli rakam, yanında simge + ad.
   Rozet ve "Geçen ay" diğer kartlardaki gibi altta kalır. */
.stat .kirilim{display:flex; flex-direction:column; gap:.46rem; margin-top:auto}
.stat .kirilim .k{display:flex; align-items:center; gap:.36rem; min-width:0}
.stat .kirilim b{
  font-size:1.28rem; font-weight:800; letter-spacing:-.04em; line-height:1;
  min-width:calc(var(--hane, 1) * 1ch); color:var(--ink); flex:0 0 auto;
}
.stat .kirilim .wa b{color:#128c4b}
.stat .kirilim .tel b{color:var(--t-500)}
.stat .kirilim .mail b{color:var(--p-600)}
.stat .kirilim i{
  display:inline-flex; align-items:center; gap:.3rem; font-style:normal; min-width:0;
  font-size:.7rem; font-weight:700; color:var(--muted); letter-spacing:.01em; white-space:nowrap;
}
.stat .kirilim svg{width:.74rem; height:.74rem; flex:0 0 auto}
/* Etiket ve simge kendi rakamının renginde */
.stat .kirilim .wa i{color:#128c4b}
.stat .kirilim .tel i{color:var(--t-500)}
.stat .kirilim .mail i{color:var(--p-600)}