/* =========================================================================
   Konfor Cafe — main.css  (SADECE kabuk + token)
   İçerik: @font-face · :root token · topbar · header/navbar · footer ·
           back-to-top · bottom-nav · genel yardımcılar.
   Sayfaya özel stiller pages/*.css içindedir.
   ========================================================================= */

/* ---------- Fontlar (self-host woff2, swap) ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/playfair-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/playfair-700.woff2") format("woff2")}

/* ---------- Token katmanı ---------- */
:root{
  --color-primary:#08233C;      /* deniz lacivert */
  --color-primary-700:#061a2d;
  --color-secondary:#F37E29;    /* gün batımı turuncu (zemin) */
  --color-secondary-600:#e06d18;
  --color-secondary-700:#A8480A; /* açık zeminde turuncu METİN (WCAG AA ≥4.5:1) */
  --color-accent:#25A2B2;       /* deniz teal */
  --color-cream:#FCF4E9;
  --color-ink:#2B2A29;
  --color-muted:#5b6470;
  --color-line:rgba(8,35,60,.12);
  --color-white:#ffffff;

  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;

  --container-max:1200px;
  --radius:.75rem;
  --radius-sm:.45rem;
  --radius-pill:999px;
  --space:1rem;
  --shadow-sm:0 4px 16px -6px rgba(8,35,60,.12);
  --shadow:0 22px 50px -20px rgba(8,35,60,.24);
  --header-h:88px;--topbar-h:42px;--bottom-nav-h:64px;
}

/* ---------- Temel tipografi ---------- */
body{font-family:var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;color:var(--color-primary);margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
p{margin:0 0 1rem}
a{text-decoration:none;transition:color .2s ease}
a:hover{color:var(--color-secondary)}
.container{max-width:var(--container-max)}
:focus-visible{outline:3px solid var(--color-secondary);outline-offset:2px;border-radius:3px}

/* ---------- Buton kabuğu ---------- */
.btn-cta,.btn-primary-c,.btn-outline-c,.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;border-radius:var(--radius-pill);padding:.7rem 1.4rem;
  border:2px solid transparent;cursor:pointer;line-height:1;min-height:44px;
  transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn-cta,.btn-primary-c{background:var(--color-secondary);color:var(--color-ink)}
.btn-cta:hover,.btn-primary-c:hover{background:#F8993C;color:var(--color-ink);transform:translateY(-2px)}
.btn-outline-c{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline-c:hover{background:var(--color-primary);color:#fff}
.btn-wa{background:#0F7A3D;color:#fff}
.btn-wa:hover{background:#0B5E2F;color:#fff;transform:translateY(-2px)}
.btn-outline-c--light{color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-c--light:hover{background:#fff;color:var(--color-primary);border-color:#fff}
/* Harita facade (tıkla-yükle) */
.map-facade{cursor:pointer;font-family:inherit;width:100%}
.map-frame{width:100%;min-height:240px;border:0;display:block;border-radius:var(--radius)}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center}
.topbar__inner{position:relative;min-height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;flex-wrap:wrap}
/* Üstbar ile menü arasında ayraç — container genişliğinde, uçları yumuşar (tam açıklık değil) */
.topbar__inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 18%,rgba(255,255,255,.28) 82%,transparent)}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:.8rem 1.4rem;min-height:var(--topbar-h)}
.topbar__link,.topbar__loc,.topbar__social a{color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.topbar__link:hover,.topbar__social a:hover{color:var(--color-secondary)}
.topbar__slogan{color:#cdd9e6;font-family:var(--font-body);font-weight:500;font-size:.9rem;line-height:1}
.topbar__loc{color:#cdd9e6}
.topbar__social{display:inline-flex;align-items:center;gap:.5rem}
.topbar__social a{font-size:1rem;min-width:44px;justify-content:center}
.topbar__link,.topbar__social a{min-height:44px;padding-block:.3rem}  /* dokunma hedefi ≥44px */
.topbar i{color:var(--color-accent)}

/* ---------- Header / Navbar ---------- */
.site-top{position:sticky;top:0;z-index:900}
/* Şeffaf header — hero/banner üzerinde (header-overlay sayfaları); scroll'da solid */
.header-overlay .site-top{position:fixed;left:0;right:0;top:0;
  background:linear-gradient(180deg,rgba(6,20,36,.80) 0%,rgba(6,20,36,.42) 55%,rgba(6,20,36,0) 100%);
  transition:background .35s ease,box-shadow .35s ease}
.header-overlay .site-top .topbar,
.header-overlay .site-top .site-header{background:transparent;box-shadow:none}
.header-overlay .site-top.is-scrolled,
.header-overlay .site-top.menu-open{background:var(--color-primary);box-shadow:var(--shadow)}
.header-overlay .site-top.is-scrolled .site-header,
.header-overlay .site-top.menu-open .site-header{box-shadow:none}
.site-header{box-shadow:var(--shadow-sm)}
.site-top .container{max-width:1440px}   /* header genişliği */
@media (min-width:1200px){.site-header .nav-center{margin-inline:auto;gap:.7rem}}  /* menüyü ortala + öğe araları */
.site-header .navbar{padding-block:.7rem}
.navbar-brand{display:flex;align-items:center;padding:0}
.brand-logo{height:64px;width:auto}
/* Dar ekranda logo + aksiyonlar tek satıra sığsın */
@media (max-width:480px){.site-header .navbar{flex-wrap:nowrap}.brand-logo{height:52px}}
@media (max-width:360px){.brand-logo{height:46px}}
.site-header .nav-link{color:#eaf1f8;font-weight:500;padding:.5rem .9rem;border-radius:var(--radius-sm)}
.site-header .nav-link:hover,.site-header .nav-link.active{color:#fff;background:rgba(255,255,255,.08)}
.site-header .nav-link.active{color:var(--color-secondary)}
.site-header .nav-link--konfor{color:var(--color-accent);font-weight:600}
.site-header .nav-link--konfor:hover{color:#fff;background:rgba(37,162,178,.22)}

/* Nav dropdown (Hizmetlerimiz alt menü) */
.has-dropdown{position:relative}
.nav-caret{font-size:.65rem;margin-left:.2rem;transition:transform .25s ease}
.nav-dropdown{list-style:none;margin:0;padding:0}
@media (min-width:1200px){
  .site-header .nav-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
    min-width:250px;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:.5rem;opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:950}
  .has-dropdown:hover > .nav-dropdown,.has-dropdown:focus-within > .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .has-dropdown:hover .nav-caret,.has-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
  .site-header .nav-dropdown a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--radius-sm);
    color:var(--color-primary);font-weight:500;font-size:.95rem;white-space:nowrap}
  .site-header .nav-dropdown a:hover{background:var(--color-cream);color:var(--color-secondary)}
  .site-header .nav-dropdown a > i:first-child{color:var(--color-secondary);width:1.15em;text-align:center}
  .nav-dropdown__all{border-top:1px solid var(--color-line);margin-top:.35rem;padding-top:.35rem}
  .site-header .nav-dropdown__all a{color:var(--color-secondary-700);font-weight:600}
}
@media (max-width:1199.98px){.nav-dropdown{display:none}.nav-caret{display:none}}
.navbar-toggler{border-color:rgba(255,255,255,.35);padding:.3rem .55rem}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(243,126,41,.5)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
/* Mobil: telefon-ara tuşu + hamburger grubu */
.nav-mobile-actions{display:flex;align-items:center;gap:.5rem}
.nav-call{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:.5rem;
  background:var(--color-secondary);color:var(--color-primary);font-size:1.05rem;text-decoration:none;
  box-shadow:0 4px 12px rgba(243,126,41,.4);transition:transform .2s ease,filter .2s ease}
.nav-call:hover{color:var(--color-primary);filter:brightness(1.05);transform:translateY(-1px)}
.nav-call:focus-visible{box-shadow:0 0 0 3px rgba(243,126,41,.55);outline:none}
/* Header aksiyon butonları (Ara · WhatsApp · Dijital Menü) */
.nav-actions{display:flex;align-items:center;gap:.5rem;margin-left:.8rem}
.btn-nav{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.88rem;line-height:1;
  padding:.5rem .85rem;border-radius:var(--radius-pill);border:2px solid transparent;min-height:40px;
  white-space:nowrap;transition:transform .15s ease,background .2s ease,color .2s ease}
.btn-nav:hover{transform:translateY(-2px)}
.btn-nav--call{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-nav--call:hover{background:#fff;color:var(--color-primary)}
.btn-nav--wa{background:#0F7A3D;color:#fff}
.btn-nav--wa:hover{background:#0B5E2F;color:#fff}
.btn-nav--menu{background:var(--color-secondary);color:var(--color-ink)}
.btn-nav--menu:hover{background:#F8993C;color:var(--color-ink)}
/* Orta masaüstünde etiketleri gizle, ikon kalsın (taşmayı önle) */
@media (min-width:1200px) and (max-width:1399.98px){
  .btn-nav--call span,.btn-nav--wa span{display:none}
  .btn-nav{padding:.5rem .7rem}
}
/* Mobil tam-ekran menü overlay (<1200px) */
body.menu-open{overflow:hidden}
.menu-close,.menu-social,.menu-brand{display:none}
@media (max-width:1199.98px){
  /* Overlay yalnız JS varken (html.js); JS yoksa menü normal akışta görünür */
  html.js #anamenu{position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;
    justify-content:flex-start;align-items:center;gap:.1rem;padding:5.75rem 1.5rem 2.5rem;
    background:linear-gradient(160deg,var(--color-primary),#061a2d);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s ease,transform .35s ease,visibility 0s linear .3s;overflow-y:auto}
  html.js #anamenu.is-open{opacity:1;visibility:visible;transform:none;
    transition:opacity .3s ease,transform .35s ease,visibility 0s linear 0s}
  /* Mobil menü üstünde logo */
  #anamenu .menu-brand{display:flex;align-items:center;position:absolute;top:1rem;left:1.2rem}
  #anamenu .menu-brand img{height:48px;width:auto}
  #anamenu .navbar-nav{width:100%;max-width:440px;gap:.1rem}
  #anamenu .nav-item{width:100%}
  #anamenu .nav-link{font-size:1.35rem;font-weight:600;text-align:center;padding:.7rem;width:100%;
    border-radius:var(--radius-sm);color:#eaf1f8}
  #anamenu .nav-link.active,#anamenu .nav-link--konfor{color:var(--color-secondary)}
  #anamenu .nav-actions{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1.6rem;width:100%}
  #anamenu .btn-nav{width:100%;max-width:300px;justify-content:center;font-size:1.02rem;padding:.8rem 1.1rem;min-height:48px}
  #anamenu .btn-nav span{display:inline}
  .menu-close{position:absolute;top:1.1rem;right:1.1rem;width:48px;height:48px;border:none;border-radius:50%;
    background:rgba(255,255,255,.1);color:#fff;font-size:1.35rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .2s ease}
  .menu-close:hover{background:var(--color-secondary)}
  .menu-social{display:flex;gap:.9rem;margin-top:2rem}
  .menu-social a{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background .2s ease}
  .menu-social a:hover{background:var(--color-secondary)}
}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--color-primary);color:#d7e2ee;padding:1.6rem 0 1.4rem;margin-top:0}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--color-secondary),var(--color-accent))}

/* Footer CTA şeridi */
.footer-cta{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start;
  background:linear-gradient(120deg,rgba(37,162,178,.16),rgba(243,126,41,.12));
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);
  padding:1.6rem 1.8rem;margin:0 0 2.6rem}
.footer-cta__eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent);margin:0 0 .3rem}
.footer-cta__title{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.65rem);color:#fff;margin:0;line-height:1.25}
.footer-cta__btns{display:flex;flex-wrap:wrap;gap:.7rem}
@media (min-width:992px){
  .footer-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:1.8rem 2.2rem}
  .footer-cta__btns{flex-shrink:0}
}
.site-footer .footer__title{font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:#fff;margin:0 0 1rem}
.footer__logo{height:60px;width:auto;margin-bottom:1.1rem}
.footer__slogan{font-family:var(--font-body);font-weight:500;font-size:1.02rem;color:#aebfd2;max-width:30ch;line-height:1.4}
.footer__social{display:flex;gap:.7rem;margin-top:1rem}
.footer__social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
.footer__social a:hover{background:var(--color-secondary);transform:translateY(-2px)}
.footer__nav{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.footer__nav a{color:#cdd9e6}
.footer__nav a:hover{color:var(--color-secondary)}
.footer__nap{font-style:normal;color:#cdd9e6;display:grid;gap:.6rem}
.footer__nap p{display:flex;gap:.5rem;align-items:flex-start;margin:0;line-height:1.5}
.footer__nap i{color:var(--color-accent);flex:0 0 auto;width:1.1em;margin-top:.2rem}
.footer__name{font-weight:600;color:#fff;margin:0}
.footer__nap a:hover,.footer__maps:hover{color:var(--color-secondary)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  align-items:center;border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.3rem;
  font-size:.85rem;color:#9fb1c6}
.footer__bottom a{color:#cdd9e6}
.footer__bottom a:hover{color:var(--color-secondary)}
.footer__credit{display:inline-flex;align-items:center;gap:.4rem;margin:0}
.footer__credit a{color:#cdd9e6;font-weight:600;transition:color .2s ease}
.footer__credit a:hover{color:var(--color-secondary)}
.footer-heart{color:#ff4d6d;font-size:.95em;display:inline-block;transform-origin:center;
  animation:heartbeat 1.4s ease-in-out infinite}
@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}
  42%{transform:scale(1.3)}70%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.footer-heart{animation:none}}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;right:1rem;bottom:calc(var(--bottom-nav-h) + 1rem);z-index:850;
  width:46px;height:46px;border:none;border-radius:50%;background:var(--color-primary);color:#fff;
  box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:var(--color-secondary)}
@media (min-width:1200px){.back-to-top{bottom:1.4rem}}

/* ---------- Bottom-nav (mobil/tablet) ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:880;display:flex;
  background:var(--color-white);border-top:1px solid var(--color-line);
  box-shadow:0 -4px 16px rgba(8,35,60,.10);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;min-height:var(--bottom-nav-h);color:var(--color-primary);font-size:.7rem;font-weight:600}
.bottom-nav__item i{font-size:1.15rem}
.bottom-nav__item:active{background:var(--color-cream)}
.bottom-nav__item:hover{color:var(--color-secondary)}

/* ---------- Genel yardımcılar ---------- */
.section{padding:clamp(2.5rem,6vw,5rem) 0}
.section--cream{background:var(--color-cream)}
.section--primary{background:var(--color-primary);color:#e7eef6}
.section--primary h2,.section--primary h3{color:#fff}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.78rem;color:var(--color-secondary-700);margin-bottom:.6rem}
.lead{font-size:1.1rem;color:var(--color-muted)}
.section-head{max-width:720px;margin:0 auto clamp(1.8rem,4vw,2.8rem);text-align:center}
.section--primary .eyebrow{color:var(--color-secondary)}

/* Sayfa banner'ı (arka plan görseli + breadcrumb + başlık) */
.page-banner{position:relative;display:flex;align-items:center;min-height:400px;overflow:hidden;
  padding:calc(var(--topbar-h) + var(--header-h) + 2rem) 0 clamp(2.6rem,6vw,4rem);
  background:var(--color-primary);color:#fff;text-align:center}
.page-banner__bg{position:absolute;inset:0;z-index:0}
.page-banner__bg img{width:100%;height:100%;object-fit:cover}
.page-banner::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,20,36,.66) 0%,rgba(6,20,36,.82) 100%)}
.page-banner__inner{position:relative;z-index:2;max-width:860px;margin-inline:auto}
.page-banner h1{color:#fff;margin:.1rem 0 .6rem}
.page-banner .eyebrow{color:#ffd9b8}
.page-banner__intro{color:#e7eef6;max-width:60ch;margin:0 auto;font-size:1.05rem}
.banner__crumbs ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin:0 0 1rem;padding:0;font-size:.86rem}
.banner__crumbs li{display:flex;align-items:center;color:#bcccdd}
.banner__crumbs li:not(:last-child)::after{content:"\203A";margin-left:.45rem;color:#8298ad}
.banner__crumbs a{color:#d6e1ee}
.banner__crumbs a:hover{color:var(--color-secondary)}
.banner__crumbs li[aria-current]{color:#fff;font-weight:600}
@media (min-width:768px){.page-banner{min-height:520px}}

/* =========================================================================
   Cila — başlık vurgusu · hover inceltme · derinlik · beliriş animasyonu
   ========================================================================= */

/* Başlık altı marka vurgu çizgisi */
.section-head h2{position:relative}
.section-head h2::after{content:"";display:block;width:54px;height:3px;border-radius:2px;margin:.9rem auto 0;
  background:linear-gradient(90deg,var(--color-secondary),var(--color-accent))}
.about-intro h2::after,.about-main h2::after{content:"";display:block;width:54px;height:3px;border-radius:2px;
  margin:.85rem 0 0;background:linear-gradient(90deg,var(--color-secondary),var(--color-accent))}

/* İkon hover inceltme (kartlar) */
.feature-card__icon,.menu-cat__icon,.value-card i,.contact-card__icon{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background .25s ease,color .25s ease}
.feature-card:hover .feature-card__icon,.menu-cat:hover .menu-cat__icon,
.value-card:hover i{transform:scale(1.12)}
a.contact-card:hover .contact-card__icon{transform:scale(1.12)}

/* Kart hover dili — tüm beyaz kartlarda turuncu kenarlık aydınlatması (tutarlılık) */
.feature-card,.value-card{transition:transform .2s ease,box-shadow .2s ease,border-color .25s ease}
.feature-card:hover,.value-card:hover{border-color:rgba(243,126,41,.4)}
.page-iletisim a.contact-card{transition:transform .2s ease,box-shadow .2s ease,border-color .25s ease,color .2s ease}
.page-iletisim a.contact-card:hover{border-color:rgba(243,126,41,.4)}

/* Buton derinliği (marka rengine uygun yumuşak gölge) */
.btn-cta,.btn-primary-c,.btn-nav--menu{box-shadow:0 8px 22px -10px rgba(243,126,41,.6)}
.btn-wa,.btn-nav--wa{box-shadow:0 8px 22px -10px rgba(15,122,61,.55)}
.btn-cta:hover,.btn-primary-c:hover,.btn-wa:hover{box-shadow:0 14px 30px -10px rgba(8,35,60,.32)}

/* Hakkımızda görsel aksanı (offset teal kare) */
.about-intro picture,.about-main picture{position:relative;display:block}
.about-intro picture::before,.about-main picture::before{content:"";position:absolute;
  left:-16px;bottom:-16px;width:130px;height:130px;border-radius:var(--radius);
  background:var(--color-accent);opacity:.15;z-index:0}
.about-intro__img,.about-main__img{position:relative;z-index:1}

/* Dekoratif aksan karesinin yatay taşma yapmasını engelle */
.about-intro,.about-main{overflow-x:clip}

/* Scroll'da yumuşak beliriş (progressive enhancement; JS yoksa görünür) */
html.js :where(.section-head,.feature-card,.menu-cat,.value-card,.menu-grid__item,
  .gallery__item,.video-card,.contact-card,.about-intro__img,.about-main__img,
  .menu-cta-band,.location-cta__map){
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
html.js .is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js :where(.section-head,.feature-card,.menu-cat,.value-card,.menu-grid__item,
    .gallery__item,.video-card,.contact-card,.about-intro__img,.about-main__img,
    .menu-cta-band,.location-cta__map){opacity:1;transform:none;transition:none}
}

/* Dar ekran (<=576px): banner derli toplu */
@media (max-width:575.98px){
  .page-banner{min-height:340px}
  .page-banner__intro{font-size:1rem;line-height:1.55}
}