/* =========================================================================
   DOSYA: varlik/css/stil.css
   ÇITIR DÜRÜM — tek stil dosyası

   TASARIM KURALLARI (v1.4.0):
   1. AÇIK ve PASTEL tonlar kullanılır.
   2. HİÇBİR YERDE GEÇİŞ (gradient) YOKTUR. Her yüzey TEK DÜZ RENKTİR.
   3. Yarı saydam (rgba) renk kullanılmaz; her renk panelden seçilen
      düz bir renk değişkenine bağlıdır.
   4. Köşeler kare kutudur (--radius panelden ayarlanır, varsayılan 0).
   5. Yazı tipleri panelden seçilir (--yazi-baslik / --yazi-govde / --yazi-menu).

   Bütün renkler ve yazı tipleri yönetim panelinden değiştirilir;
   değerler sablon/ust.php içinde :root olarak basılır.
   ========================================================================= */

/* ---------- 1. DEĞİŞKENLER ---------- */
:root{
  /* Zeminler */
  --zemin:#FFFFFF;          /* sayfa arka planı */
  --zemin-alt:#F4F8F8;      /* ikinci plandaki bölümler */
  --yuzey:#FFFFFF;          /* kart ve kutu yüzeyi */
  --kenar:#DCE7E8;          /* çizgi ve kenarlık */

  /* Vurgular */
  --vurgu:#0E9C9C;          /* ana vurgu — butonlar, bağlantılar */
  --vurgu-koyu:#0B7F7F;     /* üzerine gelince */
  --vurgu-pastel:#E4F4F4;   /* rozet ve yumuşak zeminler */
  --ikincil:#E8894A;        /* ikincil vurgu — fiyatlar */
  --ikincil-pastel:#FCEFE5; /* ikincil yumuşak zemin */

  /* Yazılar */
  --metin:#16323A;          /* ana yazı */
  --metin-sonuk:#5C7178;    /* açıklama yazısı */
  --baslik:#12262C;         /* başlık rengi */
  --baglanti:#0E9C9C;       /* bağlantı rengi */

  /* Şeritler */
  --ust-serit:#12262C;      /* en üstteki ince şerit */
  --ust-serit-yazi:#FFFFFF;
  --menu-zemin:#FFFFFF;     /* menü çubuğu zemini */
  --alt-zemin:#F4F8F8;      /* alt bilgi zemini */

  /* Durum renkleri */
  --acik-renk:#3FA37A;      /* "şu an açığız" */
  --kapali-renk:#B4626A;    /* "şu an kapalıyız" */
  --wa:#25D366;             /* WhatsApp */
  --dugme-yazi:#FFFFFF;     /* ana buton yazısı */

  /* Uyarı kutuları */
  --tamam-zemin:#E8F5EE;  --tamam-kenar:#9CCDB4;  --tamam-yazi:#22684A;
  --hata-zemin:#FBEAE8;   --hata-kenar:#E0A9A2;   --hata-yazi:#9A3C33;
  --bilgi-zemin:#E9F1F6;  --bilgi-kenar:#A9C6DA;  --bilgi-yazi:#2C5C79;

  /* Yazı tipleri (panelden seçilir) */
  --yazi-baslik:'Oswald';
  --yazi-govde:'Inter';
  --yazi-menu:'Inter';

  /* Ölçüler */
  /* Yazı boyutları — panelden değiştirilir (Panel > Ayarlar > Yazı Boyutları).
     Aşağıdaki değerler yalnızca varsayılandır; ust.php içinde ezilir. */
  --boyut-govde:17px;       /* normal metin */
  --boyut-h1:48px;          /* sayfa ana başlığı */
  --boyut-h2:32px;          /* bölüm başlıkları */
  --boyut-h3:22px;          /* alt başlıklar */
  --boyut-hero:76px;        /* anasayfadaki dev başlık */

  --olcek-1:.78em;
  --olcek-2:.9em;
  --olcek-3:1em;
  --olcek-4:var(--boyut-h3);
  --olcek-5:var(--boyut-h2);
  --olcek-6:var(--boyut-h1);
  --olcek-7:var(--boyut-hero);

  --bosluk:1.25rem;
  --kenar-genislik:min(1200px,92vw);
  --radius:0px;
  --gecis:.18s ease;
}

/* ---------- 2. SIFIRLAMA ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font-family:var(--yazi-govde),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--boyut-govde);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--baglanti);text-decoration:none;transition:var(--gecis);}
a:hover{color:var(--vurgu-koyu);}
h1,h2,h3,h4{
  font-family:var(--yazi-baslik),var(--yazi-govde),system-ui,sans-serif;
  color:var(--baslik);
  line-height:1.15;
  margin:0 0 .6rem;
  font-weight:700;
}
h1{font-size:var(--boyut-h1);}
h2{font-size:var(--boyut-h2);}
h3{font-size:var(--boyut-h3);}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;}
:focus-visible{outline:3px solid var(--vurgu);outline-offset:2px;}

/* ---------- 3. YARDIMCI ---------- */
.kenar{width:var(--kenar-genislik);margin-inline:auto;}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.bal{position:absolute!important;left:-9999px;opacity:0;}
.zorunlu{color:var(--ikincil);}
/* Ayırıcı çizgi: TEK DÜZ RENK (geçiş yok) */
.ates-cizgi{height:2px;border:0;margin:0;background:var(--vurgu);}

/* ---------- 4. DURUM ŞERİDİ ---------- */
.durum-serit{background:var(--ust-serit);color:var(--ust-serit-yazi);font-size:var(--olcek-1);}
.durum-serit .kenar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.5rem 0;}
.durum{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;}
.nokta{width:9px;height:9px;border-radius:50%;flex:none;}
.durum.acik .nokta{background:var(--acik-renk);}
.durum.kapali .nokta{background:var(--kapali-renk);}
.durum.acik{color:var(--acik-renk);}
.durum.kapali{color:var(--kapali-renk);}
.serit-tel{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap;}
.serit-tel a{color:var(--ust-serit-yazi);font-weight:600;}
.serit-tel a:hover{color:var(--vurgu);}

/* ---------- 5. ÜST MENÜ ---------- */
.ust{position:sticky;top:0;z-index:50;background:var(--menu-zemin);border-bottom:1px solid var(--kenar);}
.ust .kenar{display:flex;align-items:center;gap:1rem;padding:.85rem 0;}
.marka{
  font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-4);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;
  color:var(--baslik);
}
.marka span{color:var(--vurgu);}
.marka img{height:38px;width:auto;}
.menu-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem;}
.menu-nav a{
  font-family:var(--yazi-menu),sans-serif;
  padding:.55rem .85rem;border-radius:var(--radius);font-size:var(--olcek-2);
  font-weight:600;color:var(--metin-sonuk);transition:var(--gecis);
}
.menu-nav a:hover{color:var(--vurgu);background:var(--vurgu-pastel);}
.menu-nav a[aria-current="page"]{color:var(--vurgu);background:var(--vurgu-pastel);}
.menu-ac{display:none;margin-left:auto;background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--radius);padding:.5rem .7rem;cursor:pointer;}
.menu-ac span{display:block;width:20px;height:2px;background:var(--metin);margin:4px 0;}

/* ---------- 6. BUTONLAR (kare kutu, tek düz renk) ---------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.4rem;border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--yazi-menu),sans-serif;
  font-weight:600;font-size:var(--olcek-2);cursor:pointer;transition:var(--gecis);
  text-align:center;
}
.dugme-kor{background:var(--vurgu);color:var(--dugme-yazi);}
.dugme-kor:hover{background:var(--vurgu-koyu);color:var(--dugme-yazi);}
.dugme-wa{background:var(--wa);color:#08321A;}
.dugme-wa:hover{background:var(--wa);color:#08321A;opacity:.88;}
.dugme-cizgi{border-color:var(--kenar);color:var(--metin);background:var(--yuzey);}
.dugme-cizgi:hover{border-color:var(--vurgu);color:var(--vurgu);}
.dugme-tam{width:100%;}
button.dugme,input[type="submit"],button[type="submit"]{border-radius:var(--radius);}
.dugme-grup{display:flex;gap:.7rem;flex-wrap:wrap;}

/* ---------- 7. HERO (tek düz renk zemin, geçiş yok) ---------- */
.hero{position:relative;background:var(--zemin-alt);border-bottom:1px solid var(--kenar);overflow:hidden;}
.hero-ic{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
  padding:clamp(2.5rem,6vw,4.5rem) 0;}
.ustyazi{
  font-family:var(--yazi-menu),sans-serif;font-size:var(--olcek-1);letter-spacing:.22em;
  text-transform:uppercase;color:var(--vurgu);font-weight:700;margin:0 0 .6rem;
  display:inline-block;background:var(--vurgu-pastel);padding:.4rem .85rem;border-radius:var(--radius);
}
.hero-metin h1{font-size:var(--boyut-hero);margin:0 0 .5rem;letter-spacing:-.01em;}
.hero-alt{margin:1rem 0 0;font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-4);
  color:var(--ikincil);font-weight:600;}
.hero-dugmeler{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;}
.hero-gorsel{border:1px solid var(--kenar);border-radius:var(--radius);overflow:hidden;
  background:var(--yuzey);}
.hero-gorsel img{width:100%;height:100%;object-fit:cover;}
.hero-gorsel.bos{display:flex;align-items:center;justify-content:center;min-height:280px;
  background:var(--vurgu-pastel);color:var(--vurgu);
  font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-6);letter-spacing:.12em;
  text-align:center;padding:1.5rem;}

/* ---------- 8. ROZET ŞERİDİ ---------- */
.rozetler{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem;}
.rozet{background:var(--vurgu-pastel);color:var(--vurgu);border:1px solid var(--kenar);
  padding:.45rem .85rem;border-radius:var(--radius);font-size:var(--olcek-1);font-weight:600;}

/* ---------- 9. BÖLÜMLER ---------- */
.bolum{padding:clamp(2.2rem,5vw,3.5rem) 0;}
.bolum.ara{background:var(--zemin-alt);}
.bolum-basi{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.6rem;}
.bolum-basi p{margin:.3rem 0 0;color:var(--metin-sonuk);}

/* ---------- 10. MENÜ KARTLARI ---------- */
.kategori{margin-bottom:2.2rem;}
.kategori-ad{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-4);
  color:var(--baslik);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--vurgu);
  display:inline-block;}
.urunler{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.urun{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:var(--gecis);}
.urun:hover{border-color:var(--vurgu);}
.urun-gorsel{aspect-ratio:4/3;background:var(--zemin-alt);overflow:hidden;}
.urun-gorsel img{width:100%;height:100%;object-fit:cover;}
.urun-govde{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.urun-ad{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-3);
  color:var(--baslik);margin:0;font-weight:700;}
.urun-aciklama{color:var(--metin-sonuk);font-size:var(--olcek-2);margin:0;flex:1;}
.urun-alt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  margin-top:.5rem;padding-top:.7rem;border-top:1px solid var(--kenar);}
.fiyat{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-4);
  color:var(--ikincil);font-weight:700;}
.urun-wa{font-size:var(--olcek-1);padding:.5rem .8rem;}
.bos{color:var(--metin-sonuk);text-align:center;padding:2.5rem 1rem;
  border:1px dashed var(--kenar);border-radius:var(--radius);background:var(--zemin-alt);}

/* ---------- 11. PAKET SERVİS BANDI (tek düz renk) ---------- */
/* PAKET SERVİS BANDI
   Görsel varsa: iki sütun (görsel + yazı). Yoksa: tek sütun yazı.
   İçerik kenara yapışmasın diye her yönden iç boşluk (padding) verilir.
   Mobilde tek sütuna iner: önce görsel, sonra yazı. */
.bant{
  background:var(--vurgu-pastel);
  border:1px solid var(--kenar);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2.25rem);
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.bant p{margin:0 0 1rem;max-width:60ch;color:var(--metin);}
.bant h2{margin-bottom:.5rem;}
.bant-metin{flex:1 1 320px;min-width:0;}
.bant-dugmeler{display:flex;gap:.7rem;flex-wrap:wrap;}
.bant-dugmeler .dugme{flex:1 1 200px;}

/* Görselli hâli: sabit oranlı iki sütun */
.bant-gorselli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(1.25rem,3vw,2.5rem);}
.bant-gorsel{margin:0;border:1px solid var(--kenar);border-radius:var(--radius);
  overflow:hidden;background:var(--yuzey);}
.bant-gorsel img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;}
/* Görsel sağda olsun seçilirse sütunları yer değiştir */
.bant-sag .bant-gorsel{order:2;}
.bant-sag .bant-metin{order:1;}
.cta-serit{background:var(--zemin-alt);border:1px solid var(--kenar);border-radius:var(--radius);
  padding:1.4rem;margin-top:2rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;}
.cta-serit p{margin:0;}

/* ---------- 12. FORM ---------- */
.form-kutu{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);}
.alan{margin-bottom:1.1rem;}
.alan label{display:block;font-size:var(--olcek-2);font-weight:600;margin-bottom:.35rem;color:var(--metin);}
.alan input,.alan textarea,.alan select{
  width:100%;padding:.75rem .9rem;background:var(--yuzey);
  border:1px solid var(--kenar);color:var(--metin);font:inherit;
  border-radius:var(--radius);transition:var(--gecis);
}
.alan input:focus,.alan textarea:focus,.alan select:focus{
  outline:none;border-color:var(--vurgu);}
.alan textarea{min-height:130px;resize:vertical;}
.alan small{display:block;margin-top:.3rem;color:var(--metin-sonuk);font-size:var(--olcek-1);}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.uyari{padding:.9rem 1.1rem;border-radius:var(--radius);margin-bottom:1.25rem;
  font-size:var(--olcek-2);border:1px solid;}
.uyari-tamam{background:var(--tamam-zemin);border-color:var(--tamam-kenar);color:var(--tamam-yazi);}
.uyari-hata{background:var(--hata-zemin);border-color:var(--hata-kenar);color:var(--hata-yazi);}
.uyari-bilgi{background:var(--bilgi-zemin);border-color:var(--bilgi-kenar);color:var(--bilgi-yazi);}

/* ---------- 13. HARİTA ---------- */
.harita{border:1px solid var(--kenar);border-radius:var(--radius);overflow:hidden;background:var(--zemin-alt);}
.harita iframe{display:block;width:100%;height:340px;border:0;}

/* ---------- 14. İLETİŞİM KUTULARI ---------- */
.bilgi-izgara{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.bilgi{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--radius);padding:1.4rem;}
.bilgi h3{font-size:var(--olcek-2);text-transform:uppercase;letter-spacing:.1em;
  color:var(--metin-sonuk);margin-bottom:.5rem;}
.bilgi p{margin:0;font-size:var(--olcek-3);}
.bilgi a{font-weight:600;}

/* ---------- 15. MENÜ AFİŞİ ---------- */
.menu-afis{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.menu-afis figure{margin:0;border:1px solid var(--kenar);border-radius:var(--radius);
  overflow:hidden;background:var(--yuzey);}
.menu-afis img{width:100%;}

/* ---------- 16. ALT BİLGİ ---------- */
.alt{background:var(--alt-zemin);border-top:1px solid var(--kenar);padding:2.5rem 0 1.5rem;margin-top:2rem;}
.alt-izgara{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.alt h4{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-2);
  text-transform:uppercase;letter-spacing:.12em;color:var(--metin-sonuk);margin-bottom:.7rem;}
.alt p{margin:0 0 .4rem;font-size:var(--olcek-2);color:var(--metin-sonuk);}
.alt li{margin-bottom:.35rem;font-size:var(--olcek-2);}
/* Alt bilgideki büyük telefon numarası */
.telik{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-4);
  color:var(--baslik);margin:0 0 .3rem;font-weight:700;}
.telik a{color:var(--baslik);}
.telik a:hover{color:var(--vurgu);}
.telif{border-top:1px solid var(--kenar);margin-top:2rem;padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--olcek-1);color:var(--metin-sonuk);}

/* ---------- 17. MOBİL SABİT ÇUBUK ---------- */
.mobil-cubuk{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--yuzey);border-top:1px solid var(--kenar);}
.mobil-cubuk a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.9rem .5rem;font-weight:700;font-size:var(--olcek-2);}
.mobil-cubuk .wa{background:var(--wa);color:#08321A;}
.mobil-cubuk .tel{background:var(--vurgu);color:var(--dugme-yazi);}

/* ---------- 18. 404 ---------- */
.hata-sayfa{text-align:center;padding:clamp(3rem,10vw,6rem) 0;}
.hata-sayfa .kod{font-family:var(--yazi-baslik),sans-serif;font-size:var(--olcek-7);
  color:var(--vurgu);line-height:1;margin:0 0 .5rem;}

/* ---------- 19. DUYARLI (mobil) ---------- */
@media (max-width:900px){
  .hero-ic{grid-template-columns:1fr;}
  .ikili{grid-template-columns:1fr;}
  /* Paket bandı mobilde tek sütun: ÖNCE görsel, SONRA yazı */
  .bant-gorselli{grid-template-columns:1fr;}
  .bant-sag .bant-gorsel,.bant-sag .bant-metin{order:0;}
  .bant-gorsel img{aspect-ratio:16/9;}
}
/* Küçük ekranlarda başlıklar otomatik küçülür (panelden verilen boyutun oranında) */
@media (max-width:760px){
  :root{
    --boyut-hero:calc(var(--boyut-h1) * 1.1);
    --boyut-h1:calc(var(--boyut-h2) * 1.15);
  }
  .bant-dugmeler .dugme{flex:1 1 100%;}
}
@media (max-width:760px){
  .menu-ac{display:block;}
  .menu-nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--menu-zemin);border-bottom:1px solid var(--kenar);padding:.7rem;gap:.2rem;display:none;
  }
  .menu-nav.acik{display:flex;}
  .menu-nav a{padding:.75rem .9rem;}
  .mobil-cubuk{display:flex;}
  body{padding-bottom:56px;}
  .serit-tel{margin-left:0;width:100%;}
  .bolum-basi{align-items:flex-start;}
}