/* ===========================================================
   Kasaba Corba - Kebap | Acilis sayfasi stilleri
   Kullanan dosya: index.html
   =========================================================== */

:root{
  --kasaba-red:#e1252b;
  --kasaba-ink:#1b1b1b;
  --kasaba-gray:#3a3a3a;
  --panel-w:42vw;          /* masaustu video paneli genisligi */
  --bar-h:26px;            /* alt kirmizi serit */
  --video-ar:9 / 16;       /* dikey video varsayilani; JS gercek olcuyle gunceller */
}

html,body{height:100%;}
body{
  margin:0;
  background:#fff;
  color:var(--kasaba-ink);
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}

/* ---------- Sayfa iskeleti ---------- */
.page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:padding-right .8s cubic-bezier(.22,.61,.36,1);
}
.page-main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 20px 40px;
}

/* ---------- Logo (logo.png - 450x140) ---------- */
.brand-logo{
  margin:0 0 clamp(28px,5vh,58px);
  line-height:0;
}
.brand-logo img{
  width:clamp(230px,36vw,430px);
  height:auto;
  display:block;
  margin:0 auto;
}

.headline{
  font-weight:700;
  font-size:clamp(1.05rem,2.1vw,1.6rem);
  margin:0 0 clamp(18px,3.2vh,32px);
}

.address{
  font-weight:300;
  font-size:clamp(.95rem,1.8vw,1.35rem);
  line-height:1.5;
  color:var(--kasaba-gray);
  margin:0 0 clamp(20px,3.4vh,34px);
}

/* ---------- Telefonlar ---------- */
.phones{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3.5vw,42px);
  margin:0 0 clamp(22px,4vh,40px);
  flex-wrap:wrap;
}
.phones a{
  font-weight:600;
  font-size:clamp(1rem,2vw,1.5rem);
  color:var(--kasaba-ink);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.phones a:hover,.phones a:focus{color:var(--kasaba-red);}
.phone-divider{
  width:3px;
  height:clamp(26px,3.4vw,42px);
  background:var(--kasaba-ink);
  display:inline-block;
}

/* ---------- Sosyal medya (Bootstrap Icons) ---------- */
.social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0 0 clamp(18px,3.2vh,32px);
  text-decoration:none;
  color:var(--kasaba-ink);
  transition:color .2s ease;
}
.social:hover,.social:focus{color:var(--kasaba-red);}
.social .bi{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;
}
.social .handle{
  font-weight:300;
  font-size:clamp(1rem,2vw,1.5rem);
  letter-spacing:.01em;
  margin-left:6px;
}

/* ---------- Web adresi ---------- */
.web{
  font-weight:300;
  font-size:clamp(1rem,2.1vw,1.55rem);
  color:var(--kasaba-ink);
  text-decoration:none;
}
.web b{font-weight:700;}
.web:hover,.web:focus{color:var(--kasaba-red);}

/* ---------- Alt kirmizi serit ---------- */
.red-bar{
  flex:0 0 auto;
  height:var(--bar-h);
  background:var(--kasaba-red);
}

/* ---------- Video paneli (sagdan otomatik acilir) ---------- */
.video-panel{
  position:fixed;
  top:0; right:0; bottom:0;
  width:var(--panel-w);
  background:#000;
  z-index:1040;
  transform:translateX(101%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  box-shadow:-18px 0 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.video-panel.is-open{transform:translateX(0);}
.video-panel video{
  width:100%;
  height:100%;
  object-fit:contain;   /* video DIKEY - kirpilmadan tamami gorunsun */
  display:block;
}
/* panel acikken icerigi sola kaydir */
body.panel-open .page-wrap{padding-right:var(--panel-w);}

/* Panel ac/kapa kolu */
.panel-toggle{
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-100%,-50%);
  width:34px;
  height:74px;
  border:0;
  background:var(--kasaba-red);
  color:#fff;
  border-radius:8px 0 0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:-6px 0 16px rgba(0,0,0,.18);
  z-index:4;
}
.panel-toggle .bi{font-size:1.05rem;line-height:1;}

/* ================= SES BUTONU =================
   Normal hal: koyu, sade.
   .is-attention: ses kapaliyken dikkat cekmek icin kirmizi + zipliyor +
   etrafinda genisleyen halkalar. Ses acilir acilmaz animasyon duruyor. */
.sound-btn{
  position:absolute;
  left:clamp(14px,2vw,22px);
  bottom:clamp(14px,2vw,22px);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .25s ease, padding .25s ease, font-size .25s ease, box-shadow .25s ease;
}
.sound-btn:hover{background:var(--kasaba-red);}
.sound-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.sound-btn .bi{font-size:1.25rem;line-height:1;display:block;}
.sound-btn .label{white-space:nowrap;}

/* --- dikkat ceken hal --- */
.sound-btn.is-attention{
  background:var(--kasaba-red);
  padding:15px 26px;
  font-size:1.05rem;
  box-shadow:0 10px 28px rgba(225,37,43,.45);
  animation:sound-bounce 1.6s ease-in-out infinite;
}
.sound-btn.is-attention .bi{
  font-size:1.4rem;
  animation:sound-wiggle 1.6s ease-in-out infinite;
}
/* genisleyen iki halka */
.sound-btn.is-attention::before,
.sound-btn.is-attention::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid var(--kasaba-red);
  pointer-events:none;
  animation:sound-ring 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.sound-btn.is-attention::after{animation-delay:1.1s;}

@keyframes sound-bounce{
  0%,100%{transform:translateY(0) scale(1);}
  50%    {transform:translateY(-5px) scale(1.03);}
}
@keyframes sound-wiggle{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(-14deg);}
  75%    {transform:rotate(14deg);}
}
@keyframes sound-ring{
  0%  {transform:scale(1);    opacity:.8;}
  100%{transform:scale(1.65); opacity:0;}
}

/* ---------- Mobil / tablet ---------- */
@media (max-width:991.98px){
  /* Video DIKEY (1080x1920). Panel tam genislik degil; yuksekligi ekrana gore,
     genisligi videonun kendi oranina gore belirleniyor. Boylece kirpilma da
     siyah bant da olmuyor - videonun tamami goruunuyor. */
  .video-panel{
    position:relative;
    flex:0 0 auto;
    align-self:center;
    width:auto;
    max-width:100%;
    height:54vh;
    aspect-ratio:var(--video-ar);
    margin:2px auto 16px;
    border-radius:12px;
    box-shadow:none;
    transform:translateX(101%);
  }
  .video-panel.is-open{transform:translateX(0);}
  body.panel-open .page-wrap{padding-right:0;}
  .panel-toggle{display:none;}
  .page-main{padding:22px 16px 16px;}
  .phone-divider{width:2px;}

  /* --- mobilde dikey bosluklar daraltildi (yazi araları cok aciktı) --- */
  .brand-logo{margin-bottom:14px;}
  .brand-logo img{width:min(74vw,320px);}
  .headline{margin-bottom:10px;font-size:1.05rem;}
  .address{margin-bottom:12px;line-height:1.4;}
  .phones{margin-bottom:12px;gap:20px;}
  .social{margin-bottom:10px;}

  /* Ses butonu: ortada, daha buyuk dokunma hedefi, iOS alt guvenli alani.
     Ortalama transform ile DEGIL margin:auto ile yapiliyor; cunku
     .is-attention animasyonlari transform kullaniyor (cakisirdi). */
  .sound-btn{
    left:0;
    right:0;
    margin:0 auto;
    width:-moz-max-content;
    width:max-content;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    padding:14px 24px;
    font-size:1rem;
    gap:12px;
  }
  .sound-btn .bi{font-size:1.35rem;}
  .sound-btn.is-attention{padding:16px 30px;font-size:1.1rem;}
  .sound-btn.is-attention .bi{font-size:1.5rem;}
}

/* Kisa ekranlar (SE gibi): video biraz kisalsin ki sayfa cok uzamasin */
@media (max-width:991.98px) and (max-height:700px){
  .video-panel{height:48vh;}
}

/* Cok dar ekranlar (320px): buton dikey video panelinden tasmasin */
@media (max-width:360px){
  .sound-btn{padding:10px 16px;font-size:.9rem;gap:8px;}
  .sound-btn .bi{font-size:1.15rem;}
  .sound-btn.is-attention{padding:12px 18px;font-size:.95rem;}
  .sound-btn.is-attention .bi{font-size:1.25rem;}
}

/* iOS'ta adres cubugu vh degerini kaydirdigi icin destekleniyorsa dvh kullan */
@supports (height:100dvh){
  @media (max-width:991.98px){
    .video-panel{height:54dvh;}
  }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .video-panel,.page-wrap{transition:none;}
  .sound-btn.is-attention,
  .sound-btn.is-attention .bi,
  .sound-btn.is-attention::before,
  .sound-btn.is-attention::after{animation:none;}
}