/* Tadım Pizza — QR Şube Yönlendirme
   Ortak stil. Platform renkleri her sayfada :root üzerinden ezilir. */

:root{
  color-scheme: light;

  /* marka — beyaz zemin üzerinde kullanılan, kontrastı geçen ton */
  --marka:#c8102e;
  --marka-koyu:#a10d25;
  --marka-fon:#fdf2f4;

  /* kahraman bloğu — canlı marka rengi ve üzerindeki mürekkep */
  --hero-fon:#c8102e;
  --hero-murekkep:#ffffff;
  --hero-ustyazi:rgba(255,255,255,.72);
  --hero-metin:rgba(255,255,255,.94);

  --murekkep:#14161c;
  --metin:#535a67;
  --soluk:#828a97;
  --zemin:#f4f4f1;
  --kart:#ffffff;
  --cizgi:#e5e6e1;
  --cizgi-koyu:#d5d7d1;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--zemin);
  color:var(--metin);
  font-family:Figtree,"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ================================================================ üst bar */
.ust-bar{
  background:var(--kart);
  border-bottom:1px solid var(--cizgi);
  padding:13px 20px;
  display:flex;align-items:center;gap:14px;
}
.ust-bar .logo-marka{height:38px;width:auto;display:block}
.ust-bar .ust-ayrac{
  width:1px;height:26px;background:var(--cizgi-koyu);flex:0 0 auto;
}
.ust-bar .logo-platform{
  height:34px;width:auto;max-width:132px;
  object-fit:contain;display:block;margin-left:auto;
}

/* ============================================================== kahraman */
.kahraman{
  background:var(--hero-fon);
  color:var(--hero-murekkep);
  padding:26px 20px 30px;
}
.ustyazi{
  margin:0 0 9px;
  font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--hero-ustyazi);
}
.kahraman h1{
  margin:0 0 11px;
  font-size:27px;line-height:1.16;
  font-weight:800;letter-spacing:-.022em;
  color:var(--hero-murekkep);
  max-width:19ch;
}
.kahraman-metin{
  margin:0;
  font-size:14.5px;line-height:1.55;
  color:var(--hero-metin);
  max-width:42ch;
}
.kahraman-metin strong{font-weight:700;color:var(--hero-murekkep)}

/* ================================================================= gövde */
.govde{
  flex:1 1 auto;
  padding:18px 20px 26px;
  max-width:560px;width:100%;
  margin:0 auto;
}

/* ============================================================== butonlar */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:52px;
  padding:14px 20px;
  border:0;border-radius:12px;
  font-family:inherit;font-size:15.5px;font-weight:700;
  letter-spacing:-.006em;
  cursor:pointer;text-decoration:none;
  transition:background-color .16s ease,transform .1s ease,border-color .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible{outline:2.5px solid var(--murekkep);outline-offset:2px}
.btn-ana{background:var(--marka);color:#fff}
.btn-ana:hover{background:var(--marka-koyu)}
.btn-ana:active{transform:scale(.99)}
.btn-ana[disabled]{opacity:.6;cursor:progress}
.btn-ikincil{
  background:var(--kart);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);
  min-height:48px;font-size:14.5px;font-weight:600;
  margin-top:10px;
}
.btn-ikincil:hover{border-color:var(--murekkep)}

#btnBul{margin-top:16px}
#btnIkon{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:0 0 auto;
}
#btnIkon svg{width:20px;height:20px;display:block}
#btnIkon:empty{display:none}

.gizli{display:none !important}

/* ========================================================= durum kutusu */
.durum{
  display:none;
  padding:14px 16px 14px 44px;
  border-radius:11px;
  border:1px solid var(--cizgi);
  background:var(--kart);
  position:relative;
  font-size:14px;line-height:1.5;
}
.durum.acik{display:block}
.durum b{
  display:block;color:var(--murekkep);
  font-size:14.5px;font-weight:700;margin-bottom:2px;
  letter-spacing:-.008em;
}
.durum span{color:var(--metin)}

/* durum ikonu / nabız */
.durum::before{
  content:"";position:absolute;left:17px;top:18px;
  width:11px;height:11px;border-radius:50%;
}
.durum-bilgi{border-color:var(--cizgi-koyu)}
.durum-bilgi::before{background:var(--marka);animation:nabiz 1.5s ease-out infinite}
@keyframes nabiz{
  0%  {box-shadow:0 0 0 0 rgba(0,0,0,.22)}
  70% {box-shadow:0 0 0 9px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.durum-hata{background:#fef6f6;border-color:#f2d5d5}
.durum-hata::before{background:#c0392b}
.durum-hata b{color:#8f2018}
.durum-basari{background:var(--marka-fon);border-color:var(--cizgi-koyu)}
.durum-basari::before{background:var(--marka)}
.durum-basari b{color:var(--marka-koyu)}

/* ============================================================ sonuç kartı */
.sonuc{display:none;margin-top:14px}
.sonuc.acik{display:block}

.sube-karti{
  background:var(--kart);
  border:1px solid var(--cizgi-koyu);
  border-left:4px solid var(--marka);
  border-radius:12px;
  padding:16px 17px;
}
.sube-karti .etiket{
  font-size:10.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--marka);margin-bottom:6px;
}
.sube-karti .ad{
  font-size:19px;font-weight:800;line-height:1.25;
  color:var(--murekkep);letter-spacing:-.018em;margin-bottom:4px;
}
.sube-karti .adres{font-size:13.5px;color:var(--soluk);line-height:1.45}
.sube-karti .mesafe{
  display:inline-block;margin-top:11px;
  background:var(--zemin);border:1px solid var(--cizgi);
  color:var(--murekkep);
  padding:4px 11px;border-radius:7px;
  font-size:12.5px;font-weight:700;
}

.geri-sayim{
  font-size:13px;color:var(--soluk);
  margin:13px 0 11px;text-align:center;
}
.geri-sayim span{font-weight:800;color:var(--murekkep)}

/* ============================================================ şube listesi */
.liste-alani{display:none;margin-top:20px}
.liste-alani.acik{display:block}

.liste-baslik{
  font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soluk);
  margin:0 0 9px;
}
.arama{
  width:100%;min-height:48px;
  padding:12px 14px;
  border:1px solid var(--cizgi-koyu);border-radius:11px;
  font-size:16px;font-family:inherit;color:var(--murekkep);
  background:var(--kart);
}
.arama::placeholder{color:var(--soluk)}
.arama:focus{outline:none;border-color:var(--marka);box-shadow:0 0 0 3px var(--marka-fon)}

.sube-listesi{
  list-style:none;margin:11px 0 0;padding:0;
  background:var(--kart);
  border:1px solid var(--cizgi);border-radius:12px;
  overflow:hidden;
  max-height:46svh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sube-listesi:empty{display:none}
.sube-listesi li+li{border-top:1px solid var(--cizgi)}
.sube-listesi a{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  text-decoration:none;color:var(--murekkep);
  transition:background-color .14s ease;
}
.sube-listesi a:hover,.sube-listesi a:focus-visible{background:var(--zemin);outline:none}
.sube-listesi .l-metin{flex:1 1 auto;min-width:0}
.sube-listesi .l-ad{
  display:block;font-weight:700;font-size:14.5px;
  line-height:1.3;margin-bottom:1px;letter-spacing:-.01em;
}
.sube-listesi .l-adres{
  display:block;font-size:12.5px;color:var(--soluk);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sube-listesi .l-mesafe{
  flex:0 0 auto;
  font-size:12.5px;font-weight:700;color:var(--marka);
}
.bos-sonuc{padding:20px 16px;text-align:center;color:var(--soluk);font-size:14px}

/* ============================================================== yükleniyor */
.spinner{
  display:block;
  width:19px;height:19px;flex:0 0 auto;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:don .7s linear infinite;
}
@keyframes don{to{transform:rotate(360deg)}}

/* ============================================================== alt bilgi */
.alt-bilgi{
  margin:0;
  padding:16px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--cizgi);
  text-align:center;
  font-size:12px;line-height:1.6;color:var(--soluk);
}
.alt-bilgi b{color:var(--metin);font-weight:600}

/* ============================================== yalnızca ekran okuyucu */
.gizli-etiket{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ================================================================ ölçüler */
@media (min-width:600px){
  .ust-bar{padding:15px 28px}
  .kahraman{padding:34px 28px 38px}
  .kahraman h1{font-size:32px}
  .govde{padding:22px 28px 30px}
}
@media (max-width:359px){
  .kahraman h1{font-size:24px}
  .ust-bar .logo-marka{height:33px}
  .ust-bar .logo-platform{height:30px}
}
