/* ============================================================
   EmlakDiyo · Kullanım Kılavuzu
   Tasarım belirteçleri (token) — renkler ürün ekranlarından örneklendi.
   ============================================================ */
:root{
  --mor:#6358D2;  --mor-koyu:#4C42B0;  --mor-sis:#EFEDFC;  --mor-cizgi:#D9D4F5;
  --turuncu:#FF9718;  --turuncu-sis:#FFF2E1;
  --deniz:#12414F;  --deniz-sis:#E4EEF1;
  --yesil:#1E9E6A;  --yesil-sis:#E4F5EE;
  --kirmizi:#D9455F;  --kirmizi-sis:#FCE9EC;

  --zemin:#F4F3F9;
  --yuzey:#FFFFFF;
  --yuzey-2:#FAF9FD;
  --cizgi:#E7E4F1;
  --cizgi-yumusak:#F0EEF7;
  --metin:#16162E;
  --metin-2:#4B4B66;
  --metin-3:#8785A0;

  --golge-1:0 1px 2px rgba(22,22,46,.05), 0 1px 3px rgba(22,22,46,.04);
  --golge-2:0 2px 6px rgba(22,22,46,.06), 0 8px 24px rgba(22,22,46,.06);
  --golge-3:0 10px 30px rgba(22,22,46,.10), 0 30px 60px rgba(22,22,46,.10);

  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;
  --ust-h:64px;
  --yan-w:272px;
  --bilgi-w:340px;
  --gecis:180ms cubic-bezier(.4,0,.2,1);
}
html[data-tema="koyu"]{
  --mor:#8F84F0;  --mor-koyu:#A79EF7;  --mor-sis:#252048;  --mor-cizgi:#3A3270;
  --turuncu:#FFA940;  --turuncu-sis:#3A2A14;
  --deniz:#7FB6C6;  --deniz-sis:#16303A;
  --yesil:#4FC898;  --yesil-sis:#12332A;
  --kirmizi:#F2788C;  --kirmizi-sis:#3A1D24;

  --zemin:#0E0E1A;
  --yuzey:#17172B;
  --yuzey-2:#1D1D34;
  --cizgi:#2A2A45;
  --cizgi-yumusak:#22223A;
  --metin:#F1F0F7;
  --metin-2:#BDBBD0;
  --metin-3:#8785A0;

  --golge-1:0 1px 2px rgba(0,0,0,.4);
  --golge-2:0 2px 8px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --golge-3:0 12px 34px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--zemin);
  color:var(--metin);
  -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.55;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--mor-sis);color:var(--mor-koyu)}

/* ---------------- ÜST BAR ---------------- */
.ustbar{
  height:var(--ust-h);
  display:flex;align-items:center;gap:20px;
  padding:0 18px;
  background:var(--yuzey);
  border-bottom:1px solid var(--cizgi);
  position:relative;z-index:40;
}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
.marka-sembol{width:30px;height:30px;border-radius:9px}
.marka-yazi{display:flex;flex-direction:column;line-height:1.15}
.marka-yazi b{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.marka-yazi i{font-style:normal;font-size:11px;color:var(--metin-3);letter-spacing:.02em}

.urun-secim{
  display:flex;gap:2px;padding:3px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:11px;
}
.urun-secim button{
  padding:6px 15px;border-radius:8px;font-size:13px;font-weight:550;
  color:var(--metin-2);transition:var(--gecis);white-space:nowrap;
}
.urun-secim button:hover{color:var(--metin)}
.urun-secim button.secili{background:var(--yuzey);color:var(--mor);box-shadow:var(--golge-1);font-weight:600}

.ustbar-sag{margin-left:auto;display:flex;align-items:center;gap:8px}
.ust-dugme{
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--cizgi);background:var(--yuzey);
  font-size:13px;font-weight:500;color:var(--metin-2);
  transition:var(--gecis);
}
.ust-dugme:hover{background:var(--yuzey-2);color:var(--metin);border-color:var(--mor-cizgi)}
.ust-dugme.ikon{padding:0;width:36px;justify-content:center}
.ust-dugme kbd{
  font:inherit;font-size:11px;padding:1px 5px;border-radius:5px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-3);
}
.site-baglanti{text-decoration:none}
.site-baglanti svg{width:16px;height:16px}
.ust-dugme .gunes{display:none}
html[data-tema="koyu"] .ust-dugme .gunes{display:block}
html[data-tema="koyu"] .ust-dugme .ay{display:none}

/* ---------------- GÖVDE ---------------- */
.govde{
  height:calc(100vh - var(--ust-h));
  display:grid;
  grid-template-columns:var(--yan-w) minmax(0,1fr) var(--bilgi-w);
}

/* ---------------- YAN MENÜ ---------------- */
.yan-menu{
  min-height:0;
  border-right:1px solid var(--cizgi);
  background:var(--yuzey);
  overflow-y:auto;padding:16px 12px 28px;
}
.ilerleme-kutu{
  background:linear-gradient(150deg,var(--mor-sis),transparent 70%);
  border:1px solid var(--mor-cizgi);border-radius:var(--r-m);
  padding:12px 13px;margin-bottom:18px;position:relative;
}
.ilerleme-ust{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ilerleme-etiket{font-size:11.5px;font-weight:600;color:var(--metin-2);letter-spacing:.02em}
.ilerleme-yuzde{font-size:15px;font-weight:700;color:var(--mor);font-variant-numeric:tabular-nums}
.ilerleme-cubuk{height:5px;border-radius:99px;background:var(--yuzey);overflow:hidden;border:1px solid var(--mor-cizgi)}
.ilerleme-cubuk i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mor),var(--mor-koyu));transition:width 400ms cubic-bezier(.4,0,.2,1)}
.ilerleme-sifirla{
  margin-top:9px;font-size:11px;color:var(--metin-3);text-decoration:underline;
  text-underline-offset:2px;
}
.ilerleme-sifirla:hover{color:var(--kirmizi)}

.bolum{margin-bottom:18px}
.bolum-baslik{
  display:flex;align-items:center;gap:8px;
  padding:0 8px 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);
}
.bolum-baslik .sayi{
  margin-left:auto;font-size:10px;letter-spacing:0;
  color:var(--metin-3);font-weight:600;
}
.adim-link{
  display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border-radius:9px;
  font-size:13px;line-height:1.4;color:var(--metin-2);
  transition:background var(--gecis),color var(--gecis);
}
.adim-link:hover{background:var(--yuzey-2);color:var(--metin)}
.adim-link.aktif{background:var(--mor-sis);color:var(--mor-koyu);font-weight:600}
html[data-tema="koyu"] .adim-link.aktif{color:var(--mor)}
.adim-link .tik{
  flex-shrink:0;width:17px;height:17px;border-radius:50%;margin-top:1px;
  border:1.6px solid var(--cizgi);display:grid;place-items:center;
  transition:var(--gecis);
}
.adim-link .tik svg{width:10px;height:10px;stroke-width:2.8;opacity:0;color:#fff}
.adim-link.bitti .tik{background:var(--yesil);border-color:var(--yesil)}
.adim-link.bitti .tik svg{opacity:1}
.adim-link.bitti span{color:var(--metin-3)}

/* ---------------- SAHNE ---------------- */
.sahne-alani{
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  background:var(--zemin);
  background-image:radial-gradient(circle at 1px 1px, var(--cizgi) 1px, transparent 0);
  background-size:22px 22px;
}
.sahne-ust{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px 0;
}
.ekmek-kirintisi{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--metin-3);min-width:0;
}
.ekmek-kirintisi b{font-weight:600;color:var(--metin-2)}
.ekmek-kirintisi .ayrac{opacity:.5}
.ipucu-dugme{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  height:32px;padding:0 12px;border-radius:99px;
  background:var(--turuncu-sis);color:#9A5A00;
  border:1px solid #FFD9A6;
  font-size:12.5px;font-weight:600;transition:var(--gecis);
}
html[data-tema="koyu"] .ipucu-dugme{color:var(--turuncu);border-color:#5A421C}
.ipucu-dugme:hover{filter:brightness(.97)}
.ipucu-dugme svg{width:15px;height:15px}

.sahne{
  flex:1;min-height:0;
  display:grid;place-items:center;
  padding:18px 24px;
}
.cerceve{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:var(--r-l);
  box-shadow:var(--golge-3);
  overflow:hidden;
  max-height:100%;min-height:0;
  display:flex;flex-direction:column;
  transition:max-width 300ms cubic-bezier(.4,0,.2,1), border-radius var(--gecis);
}
/* tarayıcı çerçevesi */
.sahne[data-cerceve="tarayici"] .cerceve{width:100%;max-width:1180px}
.tarayici-bar{
  height:36px;flex-shrink:0;
  display:flex;align-items:center;gap:7px;padding:0 14px;
  background:var(--yuzey-2);border-bottom:1px solid var(--cizgi);
}
.tarayici-bar .nokta{width:9px;height:9px;border-radius:50%;background:var(--cizgi)}
.tarayici-bar .nokta:nth-child(1){background:#FF7A6B}
.tarayici-bar .nokta:nth-child(2){background:#FFC24B}
.tarayici-bar .nokta:nth-child(3){background:#5BD08A}
.tarayici-bar .adres{
  margin:0 auto;padding:3px 16px;border-radius:99px;
  background:var(--yuzey);border:1px solid var(--cizgi);
  font-size:11.5px;color:var(--metin-3);
}
/* telefon çerçevesi */
.sahne[data-cerceve="telefon"] .cerceve{
  width:auto;max-width:none;height:100%;border-radius:38px;padding:9px;
  background:#0D0D18;border-color:#2A2A3D;
}
.sahne[data-cerceve="telefon"] .cerceve{align-items:center}
.sahne[data-cerceve="telefon"] .ekran{overflow:hidden;width:auto;flex:1;min-height:0}
.sahne[data-cerceve="telefon"] .ekran-ic{
  height:100%;width:auto;aspect-ratio:var(--oran, 760 / 1651);
}
.sahne[data-cerceve="telefon"] .ekran-gorsel{width:100%;height:100%;object-fit:fill}
.sahne[data-cerceve="telefon"] .tarayici-bar{display:none}
.sahne[data-cerceve="telefon"] .ekran{border-radius:30px;overflow:hidden}
.telefon-cizgi{display:none}
.sahne[data-cerceve="telefon"] .telefon-cizgi{
  display:block;height:4px;width:34%;margin:7px auto 2px;
  border-radius:99px;background:#3A3A4E;
}

.ekran{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--yuzey)}
.ekran-ic{position:relative;display:block;width:100%}
.ekran::-webkit-scrollbar{width:9px}
.ekran::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:99px;border:2px solid var(--yuzey)}
.ekran-gorsel{display:block;width:100%;height:auto}
.hotspot-katman{position:absolute;inset:0;pointer-events:none}
.hotspot-katman > *{pointer-events:auto}

/* --- HOTSPOT --- */
.hotspot{
  position:absolute;
  border-radius:8px;
  border:1.5px solid rgba(99,88,210,.55);
  background:rgba(99,88,210,.06);
  box-shadow:0 1px 4px rgba(99,88,210,.16);
  cursor:pointer;
  transition:background var(--gecis),border-color var(--gecis),box-shadow var(--gecis),transform var(--gecis);
  animation:hs-tanit 1.6s ease-out 1;
  outline:none;
}
.hotspot:hover,.hotspot:focus-visible{
  background:rgba(99,88,210,.16);border-color:var(--mor);
  box-shadow:0 2px 10px rgba(99,88,210,.28);transform:scale(1.015);
}
.hotspot:active{background:rgba(99,88,210,.22);transform:scale(.99)}
.sahne[data-cerceve="telefon"] .hotspot{border-color:rgba(255,151,24,.55);background:rgba(255,151,24,.07);box-shadow:0 1px 4px rgba(255,151,24,.18)}
.sahne[data-cerceve="telefon"] .hotspot:hover,.sahne[data-cerceve="telefon"] .hotspot:focus-visible{
  background:rgba(255,151,24,.18);border-color:var(--turuncu);box-shadow:0 2px 10px rgba(255,151,24,.3);
}
.sahne[data-cerceve="telefon"] .hotspot:active{background:rgba(255,151,24,.24)}
@keyframes hs-tanit{
  0%{box-shadow:0 0 0 6px rgba(99,88,210,.16),0 1px 4px rgba(99,88,210,.16)}
  100%{box-shadow:0 0 0 0 rgba(99,88,210,0),0 1px 4px rgba(99,88,210,.16)}
}
.sahne[data-cerceve="telefon"] .hotspot{animation-name:hs-tanit-turuncu}
@keyframes hs-tanit-turuncu{
  0%{box-shadow:0 0 0 6px rgba(255,151,24,.18),0 1px 4px rgba(255,151,24,.18)}
  100%{box-shadow:0 0 0 0 rgba(255,151,24,0),0 1px 4px rgba(255,151,24,.18)}
}
.hotspot .rozet{
  position:absolute;top:-9px;left:-9px;
  width:20px;height:20px;border-radius:50%;
  background:var(--mor);color:#fff;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  border:2px solid var(--yuzey);
  transition:transform var(--gecis);
}
.hotspot:hover .rozet,.hotspot.goster .rozet{transform:scale(1.08)}
.sahne[data-cerceve="telefon"] .hotspot .rozet{background:var(--turuncu)}
.hotspot .etiket{
  position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  white-space:nowrap;padding:5px 11px;border-radius:8px;
  background:var(--metin);color:var(--yuzey);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  opacity:0;pointer-events:none;transition:opacity var(--gecis);
  box-shadow:var(--golge-2);
}
.hotspot .etiket::before{
  content:"";position:absolute;left:50%;top:-4px;transform:translateX(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--metin);border-radius:1px;
}
.hotspot:hover .etiket,.hotspot.goster .etiket{opacity:1}
.hotspot.goster{background:rgba(99,88,210,.16);border-color:var(--mor);box-shadow:0 2px 10px rgba(99,88,210,.28)}
.sahne[data-cerceve="telefon"] .hotspot.goster{background:rgba(255,151,24,.18);border-color:var(--turuncu);box-shadow:0 2px 10px rgba(255,151,24,.3)}
.hotspot.parla{animation:hs-parla .6s ease-in-out 2}
@keyframes hs-parla{
  0%,100%{transform:scale(1);background:rgba(99,88,210,.10)}
  50%{transform:scale(1.05);background:rgba(99,88,210,.3)}
}
.sahne[data-cerceve="telefon"] .hotspot.parla{animation-name:hs-parla-turuncu}
@keyframes hs-parla-turuncu{
  0%,100%{transform:scale(1);background:rgba(255,151,24,.10)}
  50%{transform:scale(1.05);background:rgba(255,151,24,.32)}
}

/* --- ADIM BARI --- */
.adim-bar{
  flex-shrink:0;
  display:flex;align-items:center;gap:18px;
  padding:13px 24px 17px;
  border-top:1px solid var(--cizgi);
  background:var(--yuzey);
}
.adim-metin{display:flex;gap:12px;align-items:flex-start;min-width:0}
.adim-rozet{
  flex-shrink:0;min-width:30px;height:30px;padding:0 8px;border-radius:9px;
  background:var(--mor-sis);color:var(--mor);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
  border:1px solid var(--mor-cizgi);
}
.adim-baslik{font-size:15.5px;font-weight:650;letter-spacing:-.2px;line-height:1.3}
.adim-eylem{font-size:13px;color:var(--metin-2);margin-top:2px}
.adim-eylem b{color:var(--mor);font-weight:650}
.adim-kontrol{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.gez{
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--cizgi);background:var(--yuzey);
  display:grid;place-items:center;color:var(--metin-2);transition:var(--gecis);
}
.gez:hover:not(:disabled){background:var(--mor);border-color:var(--mor);color:#fff}
.gez:disabled{opacity:.35;cursor:default}
.gez.ileri{background:var(--mor);border-color:var(--mor);color:#fff}
.gez.ileri:hover:not(:disabled){background:var(--mor-koyu)}
.adim-sayac{font-size:12px;color:var(--metin-3);font-variant-numeric:tabular-nums;min-width:46px;text-align:center}

/* ---------------- BİLGİ PANELİ ---------------- */
.bilgi-panel{
  min-height:0;
  border-left:1px solid var(--cizgi);
  background:var(--yuzey);
  overflow-y:auto;padding:20px 18px 40px;
}
.bilgi-etiket{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);margin-bottom:9px;
}
.bilgi-baslik{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.25;margin-bottom:7px}
.bilgi-ozet{font-size:13.5px;color:var(--metin-2);line-height:1.6}
.bilgi-ayrac{height:1px;background:var(--cizgi-yumusak);margin:18px 0}

.ozellik-liste li{
  display:flex;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--cizgi-yumusak);
  font-size:13.2px;line-height:1.5;color:var(--metin-2);
}
.ozellik-liste li:last-child{border-bottom:0}
.ozellik-liste li::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--mor);margin-top:7px;
}
.ozellik-liste b{color:var(--metin);font-weight:600}

/* numaralı işaret listesi */
.isaret-liste li{align-items:flex-start;cursor:pointer;border-radius:9px;padding:9px 8px;margin:0 -8px;transition:background var(--gecis)}
.isaret-liste li:hover{background:var(--yuzey-2)}
.isaret-liste li::before{margin-top:8px}
.isaret-liste b{display:block;color:var(--metin);font-weight:650;margin-bottom:2px;letter-spacing:-.1px}
.isaret-liste span{display:block;color:var(--metin-2)}
.isaret-liste li.sec{background:var(--mor-sis)!important}

.not{
  display:flex;gap:10px;padding:11px 12px;border-radius:var(--r-m);
  font-size:12.8px;line-height:1.55;margin-top:12px;
}
.not svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.not.ipucu{background:var(--yesil-sis);color:#0F6B48;border:1px solid rgba(30,158,106,.2)}
.not.dikkat{background:var(--kirmizi-sis);color:#9B2138;border:1px solid rgba(217,69,95,.2)}
.not.bilgi{background:var(--mor-sis);color:var(--mor-koyu);border:1px solid var(--mor-cizgi)}
html[data-tema="koyu"] .not.ipucu{color:var(--yesil)}
html[data-tema="koyu"] .not.dikkat{color:var(--kirmizi)}
html[data-tema="koyu"] .not.bilgi{color:var(--mor)}
.not b{font-weight:650}

.rol-etiketler{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rol-etiket{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-2);
}
.rol-etiket.mor{background:var(--mor-sis);border-color:var(--mor-cizgi);color:var(--mor-koyu)}
html[data-tema="koyu"] .rol-etiket.mor{color:var(--mor)}

.bitir-dugme{
  width:100%;margin-top:18px;height:42px;border-radius:var(--r-m);
  background:var(--mor);color:#fff;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:var(--gecis);box-shadow:0 4px 14px rgba(99,88,210,.28);
}
.bitir-dugme:hover{background:var(--mor-koyu)}
.bitir-dugme.bitti{background:var(--yesil-sis);color:#0F6B48;box-shadow:none;border:1px solid rgba(30,158,106,.25)}
html[data-tema="koyu"] .bitir-dugme.bitti{color:var(--yesil)}

/* ---------------- ARAMA ---------------- */
.arama-katman{
  position:fixed;inset:0;z-index:80;
  background:rgba(14,14,26,.42);backdrop-filter:blur(3px);
  display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.arama-kutu{
  width:min(620px,92vw);background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:var(--r-l);
  box-shadow:var(--golge-3);overflow:hidden;
}
.arama-giris{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--cizgi)}
.arama-giris svg{color:var(--metin-3)}
.arama-giris input{
  flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--metin);outline:none;
}
.arama-giris input::placeholder{color:var(--metin-3)}
.arama-giris button{
  font-size:11px;padding:3px 8px;border-radius:6px;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--metin-3);
}
.arama-sonuc{max-height:min(420px,50vh);overflow-y:auto;padding:8px}
.sonuc-satir{
  display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:10px 12px;border-radius:10px;transition:background var(--gecis);
}
.sonuc-satir:hover,.sonuc-satir.imlec{background:var(--mor-sis)}
.sonuc-satir .yol{font-size:11px;color:var(--metin-3);margin-bottom:2px}
.sonuc-satir .bas{font-size:13.5px;font-weight:600;color:var(--metin)}
.sonuc-satir .urun{
  margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:99px;background:var(--yuzey-2);
  border:1px solid var(--cizgi);color:var(--metin-3);
}
.arama-bos{padding:26px;text-align:center;color:var(--metin-3);font-size:13.5px}

/* ---------------- SUNUM MODU ---------------- */
body.sunum .yan-menu,
body.sunum .bilgi-panel,
body.sunum .ustbar{display:none}
body.sunum .govde{grid-template-columns:1fr;height:100vh}
body.sunum .sahne{padding:26px 40px 10px}
body.sunum .sahne[data-cerceve="tarayici"] .cerceve{max-width:1480px}
body.sunum .adim-bar{padding:16px 40px 22px}
body.sunum .adim-baslik{font-size:20px}
body.sunum .adim-eylem{font-size:14.5px}
body.sunum .sahne-ust{padding:16px 40px 0}
.sunum-cikis{
  position:fixed;top:16px;right:18px;z-index:70;
  height:32px;padding:0 13px;border-radius:99px;
  background:var(--yuzey);border:1px solid var(--cizgi);
  font-size:12px;font-weight:600;color:var(--metin-2);
  box-shadow:var(--golge-2);
}
.sunum-cikis:hover{color:var(--metin)}

/* ---------------- GEÇİŞ ANİMASYONU ---------------- */
.ekran-gorsel,.hotspot-katman{animation:sahne-gir 260ms cubic-bezier(.2,.7,.3,1)}
@keyframes sahne-gir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bilgi-icerik{animation:sahne-gir 260ms cubic-bezier(.2,.7,.3,1)}

/* ---------------- DAR EKRAN (masaüstü küçülmesi) ---------------- */
@media (max-width:1280px){
  :root{--bilgi-w:300px;--yan-w:238px}
}

/* ---------------- MOBİL MENÜ DÜĞMESİ / BACKDROP (yalnız dar ekranda görünür) ---------------- */
.mobil-menu-ac{
  display:none;flex-shrink:0;
  width:34px;height:34px;border-radius:9px;
  align-items:center;justify-content:center;
  border:1px solid var(--cizgi);background:var(--yuzey);color:var(--metin-2);
}
.mobil-menu-ac svg{width:18px;height:18px}
.yan-menu-ust{display:none}
.mobil-menu-kapat{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--metin-2);
}
.mobil-menu-kapat:hover{background:var(--yuzey-2)}
.menu-backdrop{
  display:none;position:fixed;inset:0;z-index:55;
  background:rgba(14,14,26,.42);
  opacity:0;pointer-events:none;transition:opacity var(--gecis);
}

/* ---------------- TABLET / TELEFON (≤900px): tuval önce, bölümler kayar panel ---------------- */
@media (max-width:900px){
  body{overflow:auto}
  .govde{
    display:flex;flex-direction:column;height:auto;
    min-height:calc(100vh - var(--ust-h));
  }
  .sahne-alani{order:1;overflow:visible;min-height:0}
  .bilgi-panel{order:2;border-left:0;border-top:1px solid var(--cizgi);overflow:visible}

  .mobil-menu-ac{display:flex}
  .yan-menu-ust{
    display:flex;align-items:center;justify-content:space-between;
    padding:2px 4px 14px;
    font-size:13px;font-weight:700;color:var(--metin);
  }
  .yan-menu{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(340px,86vw);max-height:none;
    box-shadow:var(--golge-3);
    transform:translateX(-100%);
    transition:transform 220ms cubic-bezier(.2,.7,.3,1);
  }
  body.menu-acik .yan-menu{transform:translateX(0)}
  body.menu-acik .menu-backdrop{display:block;opacity:1;pointer-events:auto}
  body.menu-acik{overflow:hidden}

  .sahne{padding:14px}
  .ekran{max-height:min(72vh,640px)}
  .adim-bar{flex-wrap:wrap;row-gap:10px}
  .adim-kontrol{margin-left:auto}

  .ustbar{padding:0 12px;gap:10px}
  .marka-yazi i{display:none}
  .urun-secim{padding:2px}
  .urun-secim button{padding:6px 10px;font-size:12.5px}
  .ust-dugme span,.ust-dugme kbd{display:none}
  .ust-dugme{width:34px;padding:0;justify-content:center}
  body.sunum .mobil-menu-ac{display:none}
  body.sunum .ipucu-dugme span{display:none}
  body.sunum .ipucu-dugme{padding:0 10px}
  body.sunum .sahne-ust{padding-right:96px}
  .sunum-cikis{top:10px;right:10px;height:28px;padding:0 10px;font-size:11px}
}

/* ---------------- TELEFON (≤520px) ---------------- */
@media (max-width:520px){
  html{font-size:15px}
  .ustbar{height:56px}
  .marka-sembol{width:26px;height:26px}
  .marka-yazi b{font-size:13.5px}
  .sahne-ust{padding:12px 14px 0}
  .ipucu-dugme span{display:none}
  .ipucu-dugme{padding:0 10px}
  .ekmek-kirintisi{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}
  .ekmek-kirintisi > *:nth-child(n+3){display:none}
  .ipucu-dugme{flex-shrink:0}
  .sahne{padding:10px}
  .ekran{max-height:62vh}
  .adim-bar{padding:11px 14px 14px}
  .adim-baslik{font-size:14px}
  .adim-eylem{font-size:12px}
  .adim-rozet{min-width:26px;height:26px;font-size:11px}
  .bilgi-panel{padding:16px 14px 32px}
  .bilgi-baslik{font-size:15.5px}
  .arama-katman{padding-top:8vh}
  .arama-kutu{width:94vw}
  .hotspot .rozet{width:17px;height:17px;font-size:9.5px;top:-7px;left:-7px;border-width:1.5px}
  .hotspot .etiket{font-size:11px;padding:4px 9px;top:calc(100% + 7px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Ekranı büyütme (dar ekranlarda web paneli görsellerini okunur kılar) ---- */
.yakin-dugme{
  display:none; align-items:center; gap:6px; flex:0 0 auto;
  height:32px; padding:0 10px; border-radius:9px;
  border:1px solid var(--cizgi); background:var(--yuzey); color:var(--metin2);
  font:600 12px/1 inherit; cursor:pointer;
}
.yakin-dugme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.yakin-dugme[aria-pressed="true"]{
  border-color:var(--mor); color:var(--mor); background:rgba(99,88,210,.08);
}

@media (max-width:900px){
  /* Telefonda tarayıcı görselleri: yatay kaydırmayı aç */
  .sahne[data-cerceve="tarayici"] .ekran{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* Telefon çerçevesi dar ekranda yüksekliğe değil GENİŞLİĞE göre kurulur.
     Yükseklik sınırlıyken kenarlarda ~120px boşta kalıyor ve ekran gereksiz
     küçülüyordu. */
  .sahne[data-cerceve="telefon"]{height:auto}
  .sahne[data-cerceve="telefon"] .cerceve{height:auto}
  .sahne[data-cerceve="telefon"] .ekran{
    width:100%; height:auto; flex:0 0 auto; overflow:hidden;
  }
  .sahne[data-cerceve="telefon"] .ekran-ic{
    width:100%; height:auto; aspect-ratio:var(--oran, 760 / 1651);
  }
  .sahne[data-cerceve="tarayici"] .ekran::-webkit-scrollbar{height:8px;width:8px}
}

/* Büyütme her genişlikte kullanılabilir; dar ekranda varsayılan açık,
   masaüstünde kapalıdır (bkz. yakinBaslat). */
body[data-cerceve="tarayici"] .yakin-dugme{display:inline-flex}
.sahne[data-cerceve="tarayici"] .ekran{overflow-x:auto; overscroll-behavior-x:contain}
body.ekran-yakin .sahne[data-cerceve="tarayici"] .ekran-ic{
  width:var(--yakin-genislik, 1040px); max-width:none;
}
body.ekran-yakin .sahne[data-cerceve="tarayici"] .cerceve{max-width:none}
body.ekran-yakin .sahne[data-cerceve="tarayici"] .hotspot .rozet{
  width:22px;height:22px;font-size:12px;top:-10px;left:-10px;
}

/* Listeden ya da tıklamayla seçilen işaret: belirgin ama sakin vurgu.
   Aynı anda yalnız bir tane olur ve animasyon içermez. */
.hotspot.goster{
  border-color:var(--mor); border-width:2px;
  background:rgba(99,88,210,.15);
  box-shadow:0 0 0 3px rgba(99,88,210,.18), 0 2px 10px rgba(99,88,210,.22);
}
.sahne[data-cerceve="telefon"] .hotspot.goster{
  border-color:var(--turuncu);
  background:rgba(255,151,24,.16);
  box-shadow:0 0 0 3px rgba(255,151,24,.20), 0 2px 10px rgba(255,151,24,.26);
}

/* ---- Yazdırma: tek adımı kâğıda dökülebilir hale getirir ---------------- */
@media print{
  @page{ margin:14mm; }
  html,body{background:#fff !important;color:#111 !important;height:auto}
  .yan-menu,.ustbar,.menu-backdrop,.mobil-menu-ac,.arama-katman,
  .adim-kontrol,.ipucu-dugme,.yakin-dugme,.sunum-cikis,.giris{display:none !important}
  /* adım-bar kalır: hangi adım olduğu kâğıtta yazsın */
  .adim-bar{border:0 !important;background:#fff !important;page-break-inside:avoid}
  .sahne-ust{border:0 !important;background:#fff !important}
  .govde{display:block;height:auto;overflow:visible}
  .sahne-alani,.bilgi-panel{display:block;width:auto;height:auto;overflow:visible;
    border:0 !important;background:#fff !important}
  .sahne{height:auto;background:#fff !important}
  .cerceve{max-width:none !important;box-shadow:none !important;border:1px solid #ccc}
  .ekran{overflow:visible !important;height:auto !important}
  .ekran-ic{width:100% !important}
  /* İşaret kutuları kâğıtta da görünsün ama mürekkep yemesin */
  .hotspot{border:1.5px solid #555 !important;background:transparent !important;
    box-shadow:none !important;animation:none !important}
  .hotspot .rozet{background:#111 !important;color:#fff !important}
  .hotspot .etiket{display:none !important}
  .bilgi-panel{page-break-inside:avoid}
  .isaret-liste li{page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
}