/* =====================================================================================================
   Ghost Kitchen tanıtım sitesi: bütün sayfaların ortak stili
   Sayfalar: / (ana sayfa) · /markalar · /subeler · /hakkimizda · /franchise · /iletisim
   Renkler mutfağın kendisinden: siyah (logo), paslanmaz çelik, termal fiş kâğıdı.
   Sayfa geçişleri: tarayıcının görünüm geçişi (View Transitions); üst menü yerinde kalır, içerik yumuşakça değişir.
   ===================================================================================================== */
:root {
  --siyah: #000;
  /* sitenin siyahı: düz siyah yerine üstten ışık alan siyah (404 sayfasıyla aynı). Büyük alanlarda zemin, küçük öğelerde düğme hali */
  --siyah-zemin: radial-gradient(110% 70% at 50% 8%, #1A1D21 0%, #0B0C0E 45%, #000 75%);
  --siyah-dugme: linear-gradient(180deg, #24282C 0%, #0B0C0E 55%, #000 100%);
  --gece: #0E1012;
  --kagit: #F4F5F3;
  --beyaz: #FFF;
  --celik-acik: #E4E7EA;
  --celik: #B8BEC4;
  --celik-koyu: #6D757C;
  --yazi-2: #4A5157;
  --gece-2: #B9BFC5;
  --cizgi: #D6DADD;
  --gece-cizgi: #2A2E33;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --kenar: max(20px, env(safe-area-inset-left, 0px));
  --icerik: 1180px;
  --celik-zemin: linear-gradient(180deg, #EEF0F2 0%, #D4D9DD 46%, #C2C8CD 54%, #E1E4E7 100%);
  --r: clamp(26px, 3.4vw, 44px);          /* oval köşe (uygulamalardaki gibi) */
  --pk: clamp(8px, 1.4vw, 20px);          /* kartların kenar boşluğu */
  --firca: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .025) 3px 4px);
  --fis-kagit: #FBFAF4;                   /* termal fiş kâğıdı */
  --tgo: #06C167; --ys: #EA004B;          /* platform renkleri (uygulamadaki gibi yalnız küçük işaretlerde) */
  --kart: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 36px -30px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--cizgi);   /* beyaz kart gölgesi */
}

/* ---------- sayfa geçişleri ---------- */
@view-transition { navigation: auto }
.ust { view-transition-name: ust }
.iz { view-transition-name: menu-iz }
::view-transition-old(root) { animation: sayfa-cik .26s cubic-bezier(.4, 0, 1, 1) both }
::view-transition-new(root) { animation: sayfa-gel .5s cubic-bezier(.16, 1, .3, 1) both }
::view-transition-group(menu-iz) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
@keyframes sayfa-cik { to { opacity: 0; transform: translateY(-14px) } }
@keyframes sayfa-gel { from { opacity: 0; transform: translateY(22px) } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none }
  html { scroll-behavior: auto !important }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

/* ---------- temel ---------- */
* { box-sizing: border-box }
html { background: var(--siyah); scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--kagit); color: var(--siyah); font: 400 18px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden }
body.koyu { background: var(--siyah-zemin) top / 100% 100vh no-repeat, var(--siyah); color: var(--beyaz) }
img { display: block; max-width: 100% }
a { color: inherit; text-underline-offset: 3px }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px }
.sar { width: min(var(--icerik), 100% - 2 * var(--kenar)); margin-inline: auto }
[hidden] { display: none !important }
.atla { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--beyaz); color: var(--siyah); font-weight: 700; text-decoration: none }
.atla:focus { top: 12px }

h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 850; letter-spacing: -.02em; line-height: .92; text-wrap: balance }
h1 { font-size: clamp(64px, 11.2vw, 168px); font-stretch: 70%; letter-spacing: -.03em; text-wrap: initial }
h2 { font-size: clamp(42px, 7vw, 96px); font-stretch: 76% }
h3 { font-size: clamp(26px, 3.2vw, 38px); font-stretch: 85%; line-height: 1 }
p { margin: 0 }
.giris-yazi, .bolum-yazi { max-width: 36em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55 }
.bolum-yazi { margin-top: 26px; color: var(--yazi-2) }
.koyu-bolum .bolum-yazi, body.koyu .bolum-yazi { color: var(--gece-2) }

/* ---------- düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; font: 700 17px var(--font); font-stretch: 92%; text-decoration: none; cursor: pointer; transition: transform .12s, background-color .15s }
.dugme:active { transform: scale(.98) }
.dugme.celik { color: var(--siyah); background: linear-gradient(180deg, #FFF 0%, #E6E9EC 38%, #C7CDD2 55%, #DDE1E4 78%, #F4F6F7 100%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #9AA2A9, 0 10px 24px -12px rgba(0, 0, 0, .6) }
.dugme.celik:hover { background: linear-gradient(180deg, #FFF 0%, #EEF0F2 38%, #D3D8DC 55%, #E6E9EC 78%, #FAFBFB 100%) }
.dugme.cizgi { color: inherit; background: none; box-shadow: inset 0 0 0 1.5px currentColor }
.dugme.cizgi:hover { background-color: rgba(127, 127, 127, .12) }
.dugme.siyah { color: var(--beyaz); background: var(--siyah-dugme) } .dugme.siyah:hover { background: linear-gradient(180deg, #31363B 0%, #15181B 55%, #050607 100%) }
.dugme[disabled] { opacity: .6; cursor: progress }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px }

/* ---------- üst menü ---------- */
.ust { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: max(22px, env(safe-area-inset-top, 0px)); color: var(--beyaz) }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none }
.logo .ik { width: 38px; height: auto } .logo .yazi { height: 15px; width: auto }
.menu { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 15.5px; font-stretch: 90% }
.menu a { position: relative; text-decoration: none; color: #C9CED3; padding: 6px 0 } .menu a:hover, .menu a[aria-current="page"] { color: var(--beyaz) }
.menu .iz { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--beyaz) }
.menu .dugme { min-height: 42px; padding: 0 18px; font-size: 15px }
.menu a.dugme, .menu a.dugme:hover { color: var(--siyah) }
.menu-ac { display: none; min-height: 42px; padding: 0 16px 0 14px; border-radius: 999px; border: 0; background: none; color: var(--beyaz); box-shadow: inset 0 0 0 1.5px #5A6168; font: 700 15px var(--font); cursor: pointer; align-items: center; gap: 10px }
.menu-ac i { display: grid; gap: 4px } .menu-ac i::before, .menu-ac i::after { content: ""; display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor }
/* telefonda tam ekran menü */
.menu-kat { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--siyah-zemin), var(--siyah); color: var(--beyaz); padding: max(22px, env(safe-area-inset-top, 0px)) var(--kenar) max(28px, env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .25s }
.menu-kat.acik { opacity: 1 }
.menu-kat .mk-ust { display: flex; align-items: center; justify-content: space-between }
.menu-kat .kapat { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: none; color: var(--beyaz); box-shadow: inset 0 0 0 1.5px #5A6168; font: 700 15px var(--font); cursor: pointer }
.menu-kat nav { display: grid; gap: 4px; margin-top: auto; margin-bottom: auto }
.menu-kat nav a { display: block; padding: 6px 0; font: 850 clamp(44px, 13vw, 64px)/1 var(--font); font-stretch: 72%; letter-spacing: -.02em; text-decoration: none; color: #8E959C; transform: translateY(16px); opacity: 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s, color .15s }
.menu-kat.acik nav a { transform: none; opacity: 1 }
.menu-kat nav a[aria-current="page"], .menu-kat nav a:hover { color: var(--beyaz) }
.menu-kat .mk-alt { display: flex; gap: 20px; color: #8E959C; font-size: 15px } .menu-kat .mk-alt a { text-decoration: none }
html.menu-acik { overflow: hidden }

/* ---------- giriş (ana sayfa) ve sayfa başlığı (iç sayfalar): siyah zemin, soluk hayalet ---------- */
.giris, .bant { position: relative; z-index: 3; background: var(--siyah-zemin), var(--siyah); color: var(--beyaz); overflow: hidden; border-radius: 0 0 var(--r) var(--r) }
.hayalet { position: absolute; z-index: 0; right: max(-60px, -4vw); bottom: -40px; width: min(44vw, 560px); opacity: .075; pointer-events: none; user-select: none }
.bant .hayalet { width: min(30vw, 380px); bottom: -70px; opacity: .065 }
@media (prefers-reduced-motion: no-preference) { .hayalet { animation: suzul 7s ease-in-out infinite alternate } @keyframes suzul { to { transform: translateY(-18px) } } }
.giris-ic { position: relative; z-index: 1; padding: clamp(44px, 7vh, 82px) 0 clamp(74px, 10vh, 124px) }
.giris-izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(56px, 8vh, 110px) }
.giris-izgara h1 { max-width: 8ch; font-size: clamp(60px, 8.6vw, 140px); line-height: .84; letter-spacing: -.055em }
.giris-etiket { display: flex; align-items: center; gap: 10px; margin: 0 0 25px 4px; color: #B9BFC5; font: 700 12px/1.2 var(--mono); letter-spacing: .11em; text-transform: uppercase }
.giris-etiket span { width: 8px; height: 8px; border-radius: 50%; background: #82D8A5; box-shadow: 0 0 0 5px rgba(130,216,165,.12) }
.giris .hayalet { right: max(-80px, -5vw); bottom: -90px; width: min(34vw, 460px); opacity: .045 }
.giris-yazi { max-width: 31em; margin-top: 25px; color: #C4C9CE }
.giris-notlar { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: #939BA2; font-size: 13px; font-weight: 600 }
.giris-notlar i { width: 4px; height: 4px; border-radius: 50%; background: #6F777E }
.giris-izgara .eylemler { margin-top: 30px }
.giris .ekran-alan { filter: drop-shadow(0 28px 42px rgba(0,0,0,.24)) }
/* hayalet maskot: mutfak ekranının arkasından başını çıkarır (ekran açılınca yükselir), süzülür, sallanır, arada kendi etrafında bir tur döner */
.ekran-alan { position: relative; isolation: isolate }
.ekran-alan .ekran-cerceve { z-index: 1 }
.ekran-hayalet { position: absolute; z-index: 0; top: 0; right: 9%; width: clamp(104px, 11vw, 160px); height: auto; translate: 0 -60%; transform-origin: 50% 70%;
  pointer-events: none; user-select: none; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 26px rgba(184, 190, 196, .16)) }
@media (prefers-reduced-motion: no-preference) {
  .ekran-hayalet { animation: hayalet-cik 1.1s cubic-bezier(.16, 1, .3, 1) .9s both, hayalet-don 12s ease-in-out 2s infinite }
  @keyframes hayalet-cik { from { opacity: 0; translate: 0 10% } }
  @keyframes hayalet-don {
    0% { transform: perspective(700px) translateY(0) rotate(-5deg) rotateY(0deg) }
    18% { transform: perspective(700px) translateY(-14%) rotate(5deg) rotateY(0deg) }
    36% { transform: perspective(700px) translateY(0) rotate(-5deg) rotateY(0deg) }
    54% { transform: perspective(700px) translateY(-14%) rotate(5deg) rotateY(0deg) }
    70% { transform: perspective(700px) translateY(-4%) rotate(0deg) rotateY(0deg) }
    84% { transform: perspective(700px) translateY(-22%) rotate(0deg) rotateY(360deg) }
    100% { transform: perspective(700px) translateY(0) rotate(-5deg) rotateY(360deg) }
  }
}
.bant-ic { position: relative; z-index: 1; padding: clamp(56px, 9vh, 110px) 0 clamp(44px, 7vh, 84px) }
.bant-ic h1 { font-size: clamp(60px, 10vw, 150px) }

/* ana sayfa fişleri: siyah girişin altından, yazıcıdan çıkar gibi */
.aski { position: relative; z-index: 1; margin-top: -72px; padding-bottom: clamp(36px, 5vw, 72px); overflow: hidden }
.aski .fis { padding-top: 96px }
.aski .fis::before { display: none }

/* ---------- fiş ---------- */
.fisler { display: flex; justify-content: space-between; gap: clamp(14px, 3vw, 40px); padding: 0 clamp(8px, 3vw, 48px) }
.fis { position: relative; flex: 0 0 auto; width: clamp(210px, 21vw, 250px); padding: 30px 18px 26px; color: var(--siyah); font: 500 12.5px/1.5 var(--mono);
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .022) 0 1px, transparent 1px 3px), var(--fis-kagit);
  transform-origin: 50% 0; transform: rotate(var(--r, 0deg)); box-shadow: 0 14px 22px -14px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .06);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x }
.fis::before { content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 16px; margin-left: -22px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #C9CED3, #8D959C); box-shadow: 0 2px 3px rgba(0, 0, 0, .3) }
.fis .f-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 800; letter-spacing: .04em } .fis .f-logo img { width: 20px }
.fis .f-ust { display: flex; justify-content: space-between; font-weight: 800; font-size: 13.5px }
.fis .f-marka { margin-top: 2px; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fis hr { margin: 10px 0; border: 0; border-top: 1.5px dashed #000 }
.fis ul { list-style: none; margin: 0; padding: 0 } .fis li { display: grid; grid-template-columns: 22px 1fr }
.fis .f-alt { display: flex; justify-content: space-between; font-weight: 800 }
.aski .fis:nth-child(1) { --r: -1.8deg } .aski .fis:nth-child(2) { --r: .8deg } .aski .fis:nth-child(3) { --r: -.6deg } .aski .fis:nth-child(4) { --r: 1.5deg }
@media (prefers-reduced-motion: no-preference) {
  .aski .fis { animation: dus 1.1s cubic-bezier(.22, .9, .3, 1.04) both; animation-delay: calc(.2s + var(--s, 0) * .16s) }
  .js .aski:not(.hazir) .fis { animation-play-state: paused }
  .aski .fis:nth-child(2) { --s: 1 } .aski .fis:nth-child(3) { --s: 2 } .aski .fis:nth-child(4) { --s: 3 }
  @keyframes dus { from { transform: translateY(-100%) rotate(0deg) } to { transform: rotate(var(--r)) } }
}

/* ---------- bölümler ---------- */
.bolum { padding: clamp(80px, 11vw, 150px) 0 }
.aski + main > .bolum:first-child { padding-top: clamp(40px, 6vw, 90px) }
.bant + main > .bolum:first-child { padding-top: clamp(56px, 8vw, 110px) }
.bolum.ince { padding-top: 0 }
.cizgili { border-top: 1px solid var(--cizgi) }
/* koyu ve çelik bölümler: kenarlardan biraz içeride, oval köşeli kart */
.koyu-bolum, .celik-bolum { margin: var(--pk); border-radius: var(--r) }
.koyu-bolum { background: var(--siyah-zemin), var(--siyah); color: var(--beyaz) }
.celik-bolum { position: relative; background: var(--celik-zemin); color: var(--siyah) }
.celik-bolum::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--firca); pointer-events: none }
.celik-bolum > * { position: relative }
.celik-bolum .bolum-yazi { color: #30363B }
.iki { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.ust-baslik { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px }
.ust-baslik .bolum-yazi { margin-top: 20px }

/* ne yapıyoruz */
.yonler { margin: 0; display: grid; gap: 30px }
.yonler div { padding-top: 22px; border-top: 2px solid var(--siyah) }
.yonler dt { font-weight: 800; font-size: 22px; font-stretch: 88%; line-height: 1.15 }
.yonler dd { margin: 8px 0 0; color: var(--yazi-2) }
/* sıralı adımlar (sipariş yolculuğu, franchise süreci) */
.adimlar-kap { margin-top: clamp(64px, 9vw, 120px) }
.adimlar { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); counter-reset: adim }
.adimlar li { position: relative; padding: 58px 26px 0 0; counter-increment: adim }
.adimlar li::before { content: counter(adim); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: currentColor; font: 800 17px var(--mono); z-index: 1 }
.adimlar li::after { content: ""; position: absolute; top: 19px; left: 40px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 14px) }
.adimlar li:last-child::after { display: none }
.adimlar b { display: block; font-size: 21px; font-stretch: 88%; font-weight: 800; line-height: 1.2 }
.adimlar span { display: block; margin-top: 8px; color: var(--yazi-2); font-size: 16.5px }
.adimlar li::before { color: var(--beyaz); background: var(--siyah-dugme) }
.koyu-bolum .adimlar li::before { color: var(--siyah); background: var(--celik-acik) }
.koyu-bolum .adimlar span { color: var(--gece-2) }

/* farkımız: klasik restoran ve Ghost Kitchen yan yana */
.karsi { margin-top: clamp(40px, 6vw, 64px) }
.karsi-bas, .karsi-satir { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 24px; align-items: baseline }
.karsi-bas { padding-bottom: 14px; border-bottom: 2px solid var(--siyah); font-weight: 700; font-size: 15.5px; color: var(--yazi-2) }
.karsi-bas .gk { display: flex; align-items: center; gap: 10px; color: var(--siyah); font-weight: 800; font-size: 17px }
.karsi-bas .gk img { width: 22px }
.karsi-satir { padding: 20px 0; border-bottom: 1px solid var(--cizgi) }
.karsi-satir b { font-size: 19px; font-stretch: 90%; font-weight: 800 }
.karsi-satir .klasik { color: #7A8188 }
.karsi-satir .bizde { font-weight: 650; font-size: 18.5px; display: flex; gap: 12px; align-items: baseline }
.karsi-satir .bizde::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--siyah); transform: translateY(-2px) }
.karsi-satir .kucuk-etiket { display: none }

/* ---------- markalar ---------- */
.muhur { --b: 104px; flex: none; width: var(--b); height: var(--b); border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #F7F8F9 0%, #D3D8DC 45%, #AEB5BB 58%, #E3E6E9 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 0 0 5px #15171A, 0 0 0 6px #3A4046 }
.muhur img { width: 72%; height: 72%; object-fit: contain }
.muhur span { font: 850 calc(var(--b) * .4) var(--font); font-stretch: 70%; color: var(--siyah) }
.dizin { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 30px 18px }
.dizin li > * { display: grid; justify-items: center; gap: 14px; text-align: center; text-decoration: none; font-weight: 700; font-size: 16px; font-stretch: 90%; line-height: 1.2 }
.dizin .muhur { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .2s }
.dizin a:hover .muhur { transform: translateY(-4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 0 0 5px #15171A, 0 0 0 6px #fff }
.dizin small { display: block; margin-top: 4px; font-weight: 500; color: var(--gece-2); font-size: 14px }
.tanitimlar { display: grid; gap: clamp(88px, 12vw, 160px); margin-top: clamp(80px, 11vw, 150px) }
.mf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 88px); align-items: center; scroll-margin-top: 40px }
.mf:nth-child(even) .mf-gorsel { order: 2 }
.mf-gorsel { position: relative; aspect-ratio: 4 / 3 }
.mf-zemin { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: var(--celik-zemin) }
.mf-zemin::after { content: ""; position: absolute; inset: 0; background: var(--firca); pointer-events: none }
.mf-zemin.renkli { background: radial-gradient(120% 100% at 28% 18%, color-mix(in srgb, var(--mr) 72%, #fff), var(--mr) 55%, color-mix(in srgb, var(--mr) 70%, #000)) }
.mf-zemin.renkli::after, .mf-zemin.fotolu::after { display: none }
.mf-zemin img.foto { width: 100%; height: 100%; object-fit: cover }
.mf-zemin .muhur { --b: clamp(150px, 19vw, 230px); position: relative; z-index: 1 }
.mf-gorsel .muhur.etiket { --b: clamp(72px, 8vw, 96px); position: absolute; z-index: 2; left: 18px; top: 18px }
.mf-gorsel .fis { position: absolute; z-index: 3; right: -16px; bottom: -40px; width: clamp(200px, 19vw, 236px); --r: 2.2deg }
.mf:nth-child(even) .mf-gorsel .fis { right: auto; left: -16px; --r: -2deg }
.mf-tur { color: var(--celik); font-weight: 600; font-size: 17px; font-stretch: 95% }
.mf h3 { margin-top: 10px; font-size: clamp(46px, 6.4vw, 88px); font-stretch: 70%; line-height: .9 }
.mf-kisa { margin-top: 18px; font-size: clamp(20px, 1.9vw, 25px); font-weight: 650; font-stretch: 92%; line-height: 1.3; color: #E4E7EA }
.mf-tanitim { margin-top: 16px; color: var(--gece-2); white-space: pre-line; max-width: 34em }
.mf-sube { margin-top: 22px; display: flex; align-items: center; gap: 10px; color: #D5D9DD; font-weight: 600; font-size: 16.5px }
.mf-sube svg { width: 20px; height: 20px; flex: none }
.mf-eylem { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px }
.bos-not { margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--gece-cizgi); border-bottom: 1px solid var(--gece-cizgi); color: #C4C9CE; font-size: 19px }
.bos-not a { color: var(--beyaz); font-weight: 700 }
.kagit-not { border-color: var(--cizgi); color: var(--yazi-2) } .kagit-not a { color: var(--siyah) }
@media (prefers-reduced-motion: no-preference) {
  /* tanıtımlar ekrana girerken bir kez belirir (yalnız JS varken) */
  .js .mf.bekler .mf-gorsel, .js .mf.bekler .mf-yazi { opacity: 0; transform: translateY(28px) }
  .mf .mf-gorsel, .mf .mf-yazi { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1) }
  .mf .mf-yazi { transition-delay: .08s }
}

/* menüsü olmayan markanın tanıtımı açık zeminde siyah kart içinde durur */
.tanitimlar > .mf { padding: clamp(28px, 5vw, 64px); border-radius: var(--r); background: var(--siyah-zemin), var(--siyah); color: var(--beyaz) }
.tanitimlar.dunyalar { gap: clamp(64px, 9vw, 120px); margin-top: 0 }

/* ---------- marka dünyası: menüsü olan marka (ör. Wafella) ---------- */
.dunya { scroll-margin-top: 24px; --mt: #000 }
.dunya-kapak { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(28px, 5vw, 76px); border-radius: var(--r); color: var(--mt);
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .1) 1.3px, transparent 1.7px) 0 0 / 15px 15px, radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mr) 76%, #fff), var(--mr) 62%), var(--mr) }
.dunya-kapak::after { content: ""; position: absolute; z-index: 0; right: -14%; bottom: -34%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--mr2, rgba(255, 255, 255, .18)) }
.dunya-kapak > * { position: relative; z-index: 1 }
.dk-logo { width: clamp(124px, 14vw, 184px); height: auto; margin: -6px 0 14px -6px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22)) }
.dk-yazi h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.dk-yazi.logosuz h2 { position: static; width: auto; height: auto; clip: auto; font-size: clamp(52px, 7vw, 96px); font-stretch: 70% }
.dk-tur { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .1); font-weight: 700; font-size: 15px }
.dk-kisa { margin-top: 16px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 850; font-stretch: 78%; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance }
.dk-yazi .mf-tanitim { margin-top: 18px; color: inherit; opacity: .82; max-width: 34em }
.dk-yazi .mf-sube { color: inherit }
.dk-yazi .dugme.cizgi:hover { background-color: rgba(0, 0, 0, .08) }
.dk-gorsel { position: relative; padding: 0 0 36px 22px }
.dk-gorsel img.foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r) - 4px); border: 7px solid #fff; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .55); transform: rotate(2deg) }
.dk-gorsel .fis { position: absolute; left: 0; bottom: 0; width: clamp(190px, 17vw, 232px); --r: -3deg }
@media (prefers-reduced-motion: no-preference) {
  .dk-gorsel img.foto, .dk-gorsel .fis, .dk-yazi { transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s cubic-bezier(.16, 1, .3, 1) }
  .js .dunya.bekler .dk-gorsel img.foto { transform: rotate(6deg) translateY(36px) scale(.96); opacity: 0 }
  .js .dunya.bekler .dk-gorsel .fis { transform: translateY(40px) rotate(-8deg); opacity: 0 }
  .js .dunya.bekler .dk-yazi { transform: translateY(24px); opacity: 0 }
  .dk-gorsel .fis { transition-delay: .18s }
}
/* menü: kategori düğmeleri ve ürün kartları */
.menu-bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; margin-top: clamp(56px, 8vw, 100px) }
.menu-bas h3 { font-size: clamp(38px, 4.8vw, 68px); font-stretch: 72% }
.menu-bas p { margin-top: 10px; color: var(--yazi-2) }
.secici { display: flex; flex-wrap: wrap; gap: 8px }
.secici button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--beyaz); color: var(--siyah); font: 700 15.5px var(--font); font-stretch: 92%; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--cizgi); transition: background-color .2s, color .2s, box-shadow .2s }
.secici button:hover { box-shadow: inset 0 0 0 1.5px var(--siyah) }
.secici button[aria-pressed="true"] { background: var(--siyah-dugme); color: var(--beyaz); box-shadow: none }
.secici small { margin-left: 6px; font-weight: 600; opacity: .6 }
.urunler { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
.urun { view-transition-class: urun; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--beyaz); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 14px 32px -24px rgba(0, 0, 0, .4); transition: transform .35s cubic-bezier(.16, 1, .3, 1) }
.urun:hover { transform: translateY(-4px) }
.urun img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: #EEF0F2 }
.urun.icecek img { object-fit: contain; background: var(--beyaz); padding: 12px } /* şişe ve kutu fotoğrafları kesilmeden */
/* fotoğrafı olmayan ürün: marka renginde zemin, logo ve ürünün adı */
.urun-yer { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; align-content: center; gap: 6px; padding: 16px; text-align: center; overflow: hidden; color: var(--mt, #000);
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .1) 1.3px, transparent 1.7px) 0 0 / 15px 15px, radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mr, #DDE1E4) 70%, #fff), var(--mr, #DDE1E4)) }
.urun-yer img { width: 42%; max-width: 120px; height: auto; aspect-ratio: auto; background: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)) }
.urun-yer span { font-weight: 850; font-stretch: 78%; font-size: 20px; line-height: 1.05 }
.urun p.urun-al { margin-top: 6px; font-size: 13px; color: var(--celik-koyu); -webkit-line-clamp: 2 }
.urun > div { padding: 16px 18px 20px }
.urun small { color: var(--celik-koyu); font-weight: 600; font-size: 13.5px }
.urun b { display: block; margin-top: 3px; font-size: 21px; font-stretch: 86%; font-weight: 850; line-height: 1.1 }
.urun p { margin-top: 8px; color: var(--yazi-2); font-size: 15.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
::view-transition-group(*.urun) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
html.filtre::view-transition-old(root), html.filtre::view-transition-new(root) { animation: none }
.dunya-alt { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 22px 26px; border-radius: 22px; background: var(--beyaz); box-shadow: inset 0 0 0 1.5px var(--cizgi) }
.dunya-alt p { font-weight: 650; font-size: 17px }

/* ---------- marka kareleri: küçük kare; dokununca marka renginde büyük panele dönüşür ---------- */
.kareler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 188px)); gap: 16px }
#vitrin { margin-top: clamp(36px, 5vw, 56px) }
.kare { --mt: #000; position: relative; aspect-ratio: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 6px; padding: 14px 12px 14px;
  border: 0; border-radius: 28px; color: var(--mt); font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .1) 1.3px, transparent 1.7px) 0 0 / 14px 14px, radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mr, #DDE1E4) 72%, #fff), var(--mr, #DDE1E4));
  box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .65); transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s }
.kare:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 22px 36px -22px rgba(0, 0, 0, .7) }
.kare:active { transform: scale(.97) }
.kare.secili { box-shadow: 0 0 0 3px var(--kagit), 0 0 0 6px var(--siyah) }
.kare-lg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0 }
.kare-lg img { max-width: 78%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22)) }
.kare-lg i { font: 850 56px var(--font); font-stretch: 70%; font-style: normal }
.kare-ad { display: grid; gap: 1px; line-height: 1.15 }
.kare-ad b { font-size: 17px; font-weight: 850; font-stretch: 86% }
.kare-ad small { font-size: 12.5px; font-weight: 600; opacity: .72 }
.kare-ipucu { margin-top: 14px; color: var(--yazi-2); font-size: 16px }
.acik-alan:not(:empty) { margin-top: 26px }
.dunya-panel { --mt: #000; position: relative; overflow: hidden; scroll-margin-top: 16px; padding: clamp(22px, 4.5vw, 64px); border-radius: var(--r); color: var(--mt);
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .1) 1.3px, transparent 1.7px) 0 0 / 15px 15px, radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mr, #DDE1E4) 74%, #fff), var(--mr, #DDE1E4) 60%) }
.dunya-panel::before { content: ""; position: absolute; right: -10%; top: -12%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--mr2, rgba(255, 255, 255, .2)); opacity: .9 }
.dunya-panel > * { position: relative }
.dunya-panel .dunya-kapak { padding: 0; background: none; border-radius: 0; overflow: visible }
.dunya-panel .dunya-kapak::after { display: none }
.dunya-panel .menu-bas p { color: inherit; opacity: .78 }
.dunya-panel .secici button { box-shadow: none }
.dunya-panel .secici button[aria-pressed="true"] { background: var(--siyah-dugme); color: var(--beyaz) }
.kapat-b { position: absolute; z-index: 4; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--beyaz); color: var(--siyah); cursor: pointer; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); transition: transform .2s }
.kapat-b:hover { transform: rotate(90deg) }
.kapat-b svg { width: 22px; height: 22px }
::view-transition-group(marka-kart) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
::view-transition-old(marka-kart), ::view-transition-new(marka-kart) { width: 100%; height: 100%; object-fit: cover; object-position: top }
::view-transition-old(marka-kart) { animation: kart-cik .25s ease both }
::view-transition-new(marka-kart) { animation: kart-gel .45s .08s ease both }
@keyframes kart-cik { to { opacity: 0 } }
@keyframes kart-gel { from { opacity: 0 } }

/* ---------- ana sayfa vitrini: marka kartları ---------- */
.vitrin { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px) }
.vk { --mt: #000; position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: calc(var(--r) - 8px); text-decoration: none; color: var(--mt);
  background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .1) 1.3px, transparent 1.7px) 0 0 / 15px 15px, var(--mr, var(--celik-acik)); transition: transform .4s cubic-bezier(.16, 1, .3, 1) }
.vk:hover { transform: translateY(-6px) }
.vk .vk-foto { position: relative; overflow: hidden }
.vk .vk-foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1) }
.vk:hover .vk-foto img { transform: scale(1.04) }
.vk-yazi { display: grid; gap: 10px; align-content: center; padding: clamp(22px, 3vw, 40px) }
.vk-yazi .vk-logo { width: 108px; height: auto; margin: -4px 0 0 -4px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .2)) }
.vk-yazi b { font-size: clamp(34px, 4vw, 56px); font-weight: 850; font-stretch: 72%; line-height: .95; letter-spacing: -.02em }
.vk-yazi p { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.4; opacity: .85 }
.vk-git { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-weight: 800 }
.vk-git i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mt); color: var(--mr, #fff); transition: transform .35s cubic-bezier(.16, 1, .3, 1) }
.vk-git svg { width: 18px; height: 18px }
.vk:hover .vk-git i { transform: translateX(6px) }
.vitrin.tek .vk { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: none }
.vitrin.tek .vk .vk-foto img { aspect-ratio: auto; min-height: 380px }

/* ---------- şubeler: sayaç, hedef çubuğu, harita, liste ---------- */
.sayac { margin-top: 26px; max-width: 17ch; font-size: clamp(36px, 5.6vw, 80px); font-weight: 850; font-stretch: 76%; line-height: 1; letter-spacing: -.02em; text-wrap: balance }
.sayac .n { font-variant-numeric: tabular-nums }
.sayac-alt { margin-top: 18px; color: var(--yazi-2); font-size: clamp(18px, 1.6vw, 21px) }
.hedef { margin-top: 34px; max-width: 560px }
.hedef-yazi { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 15.5px }
.hedef-yazi span:last-child { color: var(--yazi-2); font-weight: 600 }
.hedef-cubuk { position: relative; height: 12px; margin-top: 10px; border-radius: 6px; background: #DDE1E4; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12) }
.hedef-cubuk i { position: absolute; inset: 0 auto 0 0; width: var(--oran, 0%); min-width: 12px; border-radius: inherit; background: linear-gradient(180deg, #3A4046, #000); transition: width 1.2s cubic-bezier(.16, 1, .3, 1) }
.harita { margin: clamp(40px, 6vw, 72px) 0 0 }
.harita svg { display: block; width: 100%; height: auto; overflow: visible }
.harita path { fill: #DDE1E4; stroke: var(--kagit); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s }
.harita a path { fill: var(--siyah) }
.harita a:hover path, .harita a:focus-visible path { fill: #3A4046 }
.harita a:focus-visible { outline: none }
.harita .pin { fill: var(--beyaz); stroke: var(--siyah); stroke-width: 2.5 }
.harita text { font: 800 16px var(--font); font-stretch: 85%; fill: var(--siyah); paint-order: stroke; stroke: var(--kagit); stroke-width: 5px; stroke-linejoin: round; pointer-events: none }
.harita figcaption { margin-top: 10px; font-size: 13.5px; color: var(--celik-koyu) }
.il-gruplar { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 44px 36px }
.il-grup { scroll-margin-top: 30px; border-radius: 6px }
.il-grup h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--siyah); font-size: 36px; font-stretch: 76% }
.il-grup h3 small { font: 600 15px var(--font); color: var(--yazi-2); letter-spacing: 0; white-space: nowrap }
.il-grup ul { list-style: none; margin: 0; padding: 0 }
.il-grup li { padding: 14px 0; border-bottom: 1px solid var(--cizgi) }
.il-grup li b { display: block; font-size: 18px; font-weight: 750; font-stretch: 92% }
.il-grup li span { display: block; color: var(--yazi-2); font-size: 15.5px }
.il-grup li .sm { margin-top: 6px; color: var(--siyah); font-weight: 600 }
@media (prefers-reduced-motion: no-preference) { .il-grup.vurgu { animation: vurgu 1.8s ease-out } @keyframes vurgu { from { background: #DDE1E4; box-shadow: 0 0 0 12px #DDE1E4 } to { background: transparent; box-shadow: 0 0 0 12px transparent } } }
.alt-not { margin-top: clamp(48px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--cizgi); font-size: 19px; color: var(--yazi-2) }
.alt-not a { color: var(--siyah); font-weight: 700 }

/* ---------- vizyon ve misyon, değerler ---------- */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px) }
.vm h2 { font-size: clamp(22px, 2.3vw, 28px); font-stretch: 92%; letter-spacing: 0; line-height: 1.2; color: var(--celik-koyu) }
.vm p { margin-top: 18px; font-size: clamp(28px, 3vw, 42px); font-weight: 800; font-stretch: 80%; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance }
.koyu-bolum .vm h2 { color: var(--celik) }
.deger-liste { margin: 34px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 96px) }
.deger-liste div { padding: 24px 0; border-top: 1px solid var(--cizgi) }
.deger-liste dt { font-weight: 800; font-size: 21px; font-stretch: 88% }
.deger-liste dd { margin: 6px 0 0; color: var(--yazi-2) }
.koyu-bolum .deger-liste div { border-color: var(--gece-cizgi) } .koyu-bolum .deger-liste dd { color: var(--gece-2) }
.hikaye .bolum-yazi { margin-top: 0 }
.hikaye .bolum-yazi + .bolum-yazi { margin-top: 20px }

/* teknolojimiz: yazılımın parçaları */
.teknik { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px }
.teknik li { padding: 26px 0 28px; border-top: 2px solid var(--siyah) }
.teknik svg { width: 30px; height: 30px; color: var(--siyah) }
.teknik b { display: block; margin-top: 16px; font-size: 21px; font-stretch: 88%; font-weight: 800 }
.teknik span { display: block; margin-top: 6px; color: var(--yazi-2); font-size: 16.5px }

/* yol haritası: bugünden drone teslimatına */
.yol { list-style: none; margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: yol }
.yol li { position: relative; padding-top: 34px; border-top: 2px solid #3A4046; counter-increment: yol }
.yol li.simdi { border-top-color: var(--beyaz) }
.yol li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--siyah); box-shadow: 0 0 0 2px #3A4046 }
.yol li.simdi::before { background: var(--beyaz); box-shadow: 0 0 0 2px var(--beyaz), 0 0 0 7px rgba(255, 255, 255, .15) }
.yol .durum { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--gece-2); box-shadow: inset 0 0 0 1px #3A4046 }
.yol li.simdi .durum { color: var(--siyah); background: var(--celik-acik); box-shadow: none }
.yol b { display: block; margin-top: 14px; font-size: 23px; font-stretch: 84%; font-weight: 850; line-height: 1.1 }
.yol span.ac { display: block; margin-top: 8px; color: var(--gece-2); font-size: 16.5px }

/* drone sahnesi: ekrana sığar */
.dron-sahne { margin-top: clamp(40px, 6vw, 72px) }
.dron-sahne svg { display: block; width: 100%; height: auto; max-height: min(66vh, 560px); border-radius: 30px }
.dron-sahne .not { margin-top: 12px; font-size: 14px; color: #8E959C }
@media (prefers-reduced-motion: no-preference) {
  .dron-sahne .pervane { transform-box: fill-box; transform-origin: center; animation: pervane .08s linear infinite alternate }
  .dron-sahne .govde { animation: sallan 2.2s ease-in-out infinite alternate }
  .dron-sahne .paket { transform-box: fill-box; transform-origin: 50% 0; animation: paket 1.7s ease-in-out infinite alternate }
  .dron-sahne .led { animation: led 1.1s step-end infinite }
  .dron-sahne .isaret { animation: isaret 1.6s ease-in-out infinite }
  .dron-sahne .yildiz { animation: yildiz 3.6s ease-in-out infinite alternate }
  .dron-sahne .serit { animation: serit 1.8s linear infinite }
  .dron-sahne .iz { animation: iz 1.1s linear infinite }
  .dron-sahne .inis { transform-box: fill-box; transform-origin: center; animation: inis 2.2s ease-out infinite }
  @keyframes pervane { to { transform: scaleX(.16) } }
  @keyframes sallan { from { transform: translateY(-3px) rotate(-1.6deg) } to { transform: translateY(4px) rotate(1.6deg) } }
  @keyframes paket { from { transform: rotate(-5deg) } to { transform: rotate(5deg) } }
  @keyframes led { 0% { opacity: 1 } 50% { opacity: .15 } }
  @keyframes isaret { 50% { opacity: .15 } }
  @keyframes yildiz { from { opacity: .2 } to { opacity: 1 } }
  @keyframes serit { to { stroke-dashoffset: -50 } }
  @keyframes iz { to { stroke-dashoffset: -14 } }
  @keyframes inis { from { transform: scale(.5); opacity: .9 } to { transform: scale(1.7); opacity: 0 } }
}
/* drone sahnesi 3B (WebGL): kap, vinyet */
.sahne3 { position: relative; overflow: hidden; aspect-ratio: 1000 / 600; max-height: min(66vh, 600px); border-radius: 30px; background: #A6C8E6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 30px 60px -40px rgba(0, 0, 0, .9); touch-action: pan-y; cursor: crosshair }
.sahne3 canvas { display: block; width: 100%; height: 100% }
.sahne3::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 95% at 50% 42%, transparent 62%, rgba(0, 0, 0, .2) 100%) }
@media (max-width: 700px) { .sahne3 { aspect-ratio: 5 / 4; max-height: none; border-radius: 22px; cursor: default } }
/* ana sayfa: drone bölümü tek ekranda; yazı solda, sahne sağda */
.gelecek { padding: clamp(48px, 6vw, 88px) 0 }
.gelecek-izgara { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center }
.gelecek h2 { font-size: clamp(40px, 5.2vw, 76px) }
.gelecek .bolum-yazi { margin-top: 20px }
.gelecek .dron-sahne { margin-top: 0 }
.gelecek .not { margin-top: 18px; font-size: 13.5px; color: #8E959C }
/* ana sayfa: markalar bölümü küçük; başlık solda, kareler sağda */
.bolum.kisa { padding: clamp(40px, 5vw, 68px) 0 }
.marka-serit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center }
.marka-serit h2 { font-size: clamp(40px, 5vw, 72px) }
.marka-serit .bolum-yazi { margin-top: 14px }
.marka-serit .eylemler { margin-top: 22px }
.marka-serit #vitrin { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 0 }
.marka-serit #vitrin .kare { width: 168px }
.marka-serit .bos-not { grid-column: 1 / -1; margin-top: 0 }

/* ---------- franchise ---------- */
.kazanc { list-style: none; margin: 0; padding: 0 }
.kazanc li { padding: 20px 0; border-top: 1.5px solid rgba(0, 0, 0, .55) }
.kazanc li:last-child { border-bottom: 1.5px solid rgba(0, 0, 0, .55) }
.kazanc b { display: block; font-size: 21px; font-stretch: 88%; font-weight: 800 }
.kazanc span { display: block; margin-top: 4px; color: #30363B }
.karsilik { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 64px) }
.karsilik h3 { font-size: clamp(26px, 2.8vw, 34px); padding-bottom: 14px; border-bottom: 2px solid var(--siyah) }
.karsilik ul { list-style: none; margin: 0; padding: 0 }
.karsilik li { padding: 14px 0; border-bottom: 1px solid var(--cizgi); display: flex; gap: 12px; align-items: baseline }
.karsilik li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--siyah); transform: translateY(-2px) }
.sss { margin-top: clamp(40px, 6vw, 64px); border-top: 2px solid var(--siyah) }
.sss details { border-bottom: 1px solid var(--cizgi) }
.sss summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-weight: 800; font-size: clamp(19px, 1.8vw, 22px); font-stretch: 90% }
.sss summary::-webkit-details-marker { display: none }
.sss summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .3s cubic-bezier(.16, 1, .3, 1) }
.sss details[open] summary::after { transform: translateY(3px) rotate(-135deg) }
.sss details p { padding: 0 0 24px; max-width: 46em; color: var(--yazi-2) }
@media (prefers-reduced-motion: no-preference) { .sss details[open] p { animation: ac .4s cubic-bezier(.16, 1, .3, 1) } @keyframes ac { from { opacity: 0; transform: translateY(-6px) } } }

/* ---------- iletişim ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px }
.alan { display: grid; gap: 8px; font-weight: 600; font-size: 15px; color: var(--yazi-2) }
.alan.tam { grid-column: 1 / -1 }
.alan input, .alan select, .alan textarea { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1.5px solid #C9CED3; background: var(--beyaz); color: var(--siyah); font: 400 17px var(--font); outline: none; transition: border-color .15s, box-shadow .15s }
.alan textarea { resize: vertical; min-height: 170px; line-height: 1.5 }
.alan select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #4A5157 50%), linear-gradient(135deg, #4A5157 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--siyah); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) }
.alan input[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-color: #B3261E }
.onay { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--yazi-2); cursor: pointer }
.onay input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: #000 }
.form-alt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px }
.form-hata { color: #B3261E; font-weight: 600 }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.gonderildi { padding: 34px 0; border-top: 2px solid var(--siyah); border-bottom: 2px solid var(--siyah) }
.gonderildi b { display: block; font-size: clamp(30px, 3.6vw, 44px); font-stretch: 80%; font-weight: 850; line-height: 1.05 }
.gonderildi p { margin-top: 12px; color: var(--yazi-2) }
.konular { list-style: none; margin: 30px 0 0; padding: 0 }
.konular li { padding: 16px 0; border-top: 1px solid var(--cizgi) }
.konular b { display: block; font-size: 19px; font-stretch: 90%; font-weight: 800 }
.konular span { display: block; margin-top: 2px; color: var(--yazi-2); font-size: 16px }
.uyari-kutu { margin-top: 30px; padding: 20px 22px; border-radius: 16px; background: var(--celik-zemin); position: relative; overflow: hidden }
.uyari-kutu::before { content: ""; position: absolute; inset: 0; background: var(--firca) }
.uyari-kutu > * { position: relative } .uyari-kutu b { display: block; font-size: 17px } .uyari-kutu p { margin-top: 4px; color: #30363B; font-size: 16px }

/* ---------- alt bilgi ---------- */
.alt { background: var(--siyah-zemin), var(--siyah); color: #9AA1A8; padding: 0 0 max(36px, env(safe-area-inset-bottom, 0px)); font-size: 15px; border-radius: var(--r) var(--r) 0 0 }
.alt-ic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; padding-top: clamp(44px, 6vw, 64px) }
.alt-ic p { margin-top: 14px; max-width: 26em }
.alt h2 { font: 700 14.5px var(--font); color: #D5D9DD; letter-spacing: 0; margin-bottom: 12px }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.alt a { text-decoration: none } .alt a:hover { color: var(--beyaz) }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 40px; font-size: 13.5px; color: #6F777E }

/* ---------- tablet ve telefon ---------- */
@media (max-width: 960px) {
  .menu { display: none } .menu-ac { display: inline-flex }
  .iki, .vm, .deger-liste, .form, .mf, .karsilik, .gelecek-izgara, .marka-serit, .giris-izgara { grid-template-columns: minmax(0, 1fr) }
  .giris-izgara { gap: 36px; padding-bottom: 48px } .ekran-cerceve, .ekran-alan { max-width: 440px }
  .giris-ic { padding-top: 58px }
  .giris-izgara h1 { max-width: 10ch; font-size: clamp(66px, 12vw, 112px) }
  .giris-yazi { max-width: 38em }
  .ekran-alan { margin-top: 64px } .ekran-hayalet { width: 96px; right: 12% } /* telefonda hayaletin başı düğmelerle ekran arasına sığsın */
  .giris .hayalet { right: -18vw; bottom: auto; top: 70px }
  .marka-serit #vitrin { justify-content: flex-start }
  .teknik { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .yol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px }
  .mf:nth-child(even) .mf-gorsel { order: 0 }
  .mf-gorsel { aspect-ratio: 1 / 1 }
  .dunya-kapak { grid-template-columns: minmax(0, 1fr) }
  .dk-gorsel { padding: 0 0 40px 14px; max-width: 520px }
  .vitrin.tek .vk { grid-template-columns: minmax(0, 1fr) }
  .vitrin.tek .vk .vk-foto img { min-height: 0; aspect-ratio: 4 / 3 }
  .mf-gorsel .fis, .mf:nth-child(even) .mf-gorsel .fis { right: 10px; left: auto; bottom: -40px; width: 176px; padding: 26px 14px 22px; font-size: 11.5px; --r: 2deg }
  .mf-gorsel.fisli + .mf-yazi { margin-top: 30px }
  .mf-gorsel .fis li:nth-child(n+5) { display: none }
  .adimlar { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .adimlar li { padding: 0 0 0 60px; min-height: 40px }
  .adimlar li::after { top: 44px; bottom: -26px; left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, currentColor 0 8px, transparent 8px 14px); opacity: .9 }
  .fisler { justify-content: flex-start; padding-left: 4px }
  .aski .fis { width: 200px; font-size: 12px }
  .aski .fis:nth-child(n+3) { display: none }
  .dizin { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) }
  .dizin .muhur { --b: 88px }
  .hayalet { width: 62vw; right: -18vw; bottom: auto; top: 90px; opacity: .06 }
  .bant .hayalet { width: 46vw; top: auto; bottom: -40px; right: -10vw }
  .harita { margin-inline: calc(-1 * var(--kenar) + 6px) } .harita figcaption { padding-inline: calc(var(--kenar) - 6px) }
  .harita text { font-size: 30px; stroke-width: 8px }
  .harita .pin { stroke-width: 4 }
  .karsi-bas { display: none }
  .karsi-satir { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0 }
  .karsi-satir .kucuk-etiket { display: block; font-size: 13.5px; font-weight: 600; color: var(--celik-koyu) }
  .karsi-satir .bizde { display: block } .karsi-satir .bizde::before { display: none }
  .alt-ic { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  /* Ana sayfada dar ekran: okunaklı ölçüler, rahat dokunma alanları ve kontrollü boşluk */
  body { font-size: 16px; line-height: 1.58 }
  .sar { width: min(var(--icerik), 100% - 40px) }
  .bolum { padding-block: 64px }
  .koyu-bolum, .celik-bolum { margin-inline: 8px; border-radius: 26px }
  .bolum h2 { font-size: clamp(38px, 11vw, 54px); line-height: .96; letter-spacing: -.04em }
  .bolum-yazi { margin-top: 17px; font-size: 17px; line-height: 1.55 }
  .dugme { min-height: 52px; padding-inline: 20px; font-size: 16px }
  .logo { gap: 9px }
  .logo .ik { width: 32px }
  .logo .yazi { height: 13px }
  .ust { padding-top: max(16px, env(safe-area-inset-top, 0px)) }
  .menu-ac { min-height: 44px }
  .iki { gap: 34px }
  .yonler { gap: 0 }
  .yonler div { position: relative; padding: 20px 0 20px 42px; border-top-width: 1px }
  .yonler svg { position: absolute; top: 22px; left: 0; width: 25px; height: 25px }
  .yonler dt { font-size: 19px }
  .yonler dd { margin-top: 6px; font-size: 15px; line-height: 1.55 }
  .adimlar-kap { margin-top: 48px }
  .adimlar-kap h3 { font-size: 25px }
  .adimlar { margin-top: 26px; gap: 22px }
  .adimlar li { padding-left: 54px; min-height: 42px }
  .adimlar li::before { width: 38px; height: 38px; font-size: 15px }
  .adimlar b { font-size: 18px }
  .adimlar span { margin-top: 5px; font-size: 15px; line-height: 1.5 }
  .karsi { margin-top: 28px }
  .karsi-satir { gap: 7px; padding: 18px 0 }
  .karsi-satir b { font-size: 17px }
  .karsi-satir .klasik, .karsi-satir .bizde { font-size: 15px; line-height: 1.48 }
  .karsi-satir .kucuk-etiket { margin-bottom: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase }
  .marka-serit .eylemler { margin-top: 18px }
  .bos-not { margin-top: 25px; padding: 18px 0; font-size: 16px }
  .gelecek { padding-block: 48px }
  .gelecek-izgara { gap: 24px }
  .gelecek .not { font-size: 13px; line-height: 1.5 }
  .dron-sahne { margin-top: 0 }
  .dron-sahne svg, .sahne3 { border-radius: 20px }
  .celik-bolum .kazanc { margin-top: 0 }
  .alt-ic { gap: 28px; padding-top: 38px }
  .alt-ic p { font-size: 14px }
  .alt-son { margin-top: 28px; font-size: 12px }
  .alt-son span:last-child { display: none }
  .giris-ic { padding-top: 42px; padding-bottom: 82px }
  .giris-izgara { gap: 28px; padding-bottom: 38px }
  .giris-izgara h1 { font-size: clamp(56px, 15vw, 82px); line-height: .88 }
  .giris-etiket { margin-bottom: 20px; font-size: 10px }
  .giris-yazi { margin-top: 20px; font-size: 17px }
  .giris-izgara .eylemler { display: grid; grid-template-columns: 1fr; margin-top: 24px }
  .giris-izgara .eylemler .dugme { width: 100% }
  .giris-notlar { flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 11px }
  .ekran-alan { margin-top: 46px }
  .kareler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .kare { border-radius: 24px }
  .kapat-b { top: 12px; right: 12px; width: 42px; height: 42px }
  /* menü telefonda sipariş uygulamalarındaki gibi: solda yazı, sağda küçük fotoğraf; kategoriler yana kayar */
  .menu-bas { display: grid; grid-template-columns: minmax(0, 1fr) }
  .secici { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--kenar)); padding: 2px var(--kenar) 6px; scroll-snap-type: x proximity }
  .secici::-webkit-scrollbar { display: none }
  .secici button { flex: none; scroll-snap-align: start }
  .urunler { gap: 10px }
  .urun { flex-direction: row-reverse; align-items: stretch; border-radius: 20px }
  .urun img { width: 116px; aspect-ratio: auto; flex: none; object-fit: cover; border-radius: 0 20px 20px 0 }
  .urun-yer { width: 116px; flex: none; aspect-ratio: auto; padding: 10px; border-radius: 0 20px 20px 0 }
  .urun-yer img { width: 64px }
  .urun-yer span { font-size: 14px }
  .urun > div { flex: 1; min-width: 0; padding: 14px 14px 14px 16px }
  .urun b { font-size: 19px }
  .urun p { font-size: 14.5px; -webkit-line-clamp: 3 }
  .teknik, .yol { grid-template-columns: minmax(0, 1fr) }
  .aski .fis:nth-child(2) { display: none } .fisler { justify-content: center } .aski .fis { width: min(260px, 82vw) }
  .dron-sahne svg { border-radius: 22px }
}

@media (max-width: 380px) {
  .sar { width: min(var(--icerik), 100% - 32px) }
  .giris-izgara h1 { font-size: clamp(52px, 14.5vw, 62px) }
  .giris-notlar { font-size: 10px }
  .giris-etiket { letter-spacing: .07em }
  .eylemler .dugme { padding-inline: 15px; font-size: 15px }
  .bolum h2 { font-size: 37px }
}

/* ---------- ana sayfa: mutfak ekranı (temsilî), yazıcı ağzı, çelik plakalar, karşılaştırma ---------- */
.ekran-cerceve { position: relative; padding: 10px; border-radius: 30px; background: var(--celik-zemin); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 0 1px #5F676E }
.ekran-cerceve::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--firca); pointer-events: none; opacity: .7 }
.ekran { position: relative; overflow: hidden; border-radius: 22px; padding: 18px 18px 20px; background: var(--gece); color: var(--beyaz); font-family: var(--font); box-shadow: inset 0 0 0 1px #262B30 }
.ek-ust { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: #D5D9DD }
.ek-ust b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-stretch: 92% }
.ek-nokta { width: 9px; height: 9px; border-radius: 50%; background: #2DB36A; box-shadow: 0 0 0 3px rgba(45, 179, 106, .2) }
.ek-saat { font: 700 16px var(--mono); letter-spacing: .02em; color: var(--beyaz) }
.ek-saat::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #F27A1A; vertical-align: 2px; animation: ek-saat 1s step-end infinite }
@keyframes ek-saat { 50% { opacity: .15 } }
.ek-cips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.cip { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border-radius: 999px; background: #1A1F24; color: #C9CED3; font-weight: 600; font-size: 12.5px; font-stretch: 95%; box-shadow: inset 0 0 0 1px #2A3036 }
.cip.tgo::before, .cip.ys::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--tgo) } .cip.ys::before { background: var(--ys) }
.bilet { margin-top: 16px; border-radius: 16px; overflow: hidden; background: var(--beyaz); color: var(--siyah); box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .9) }
.bi-bant { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; background: #EEF0F2; border-bottom: 1px solid #DFE3E6 }
.bi-bant small { display: block; font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6D757C; margin-bottom: 5px }
.bi-bant b { font-size: 19px; font-weight: 850; font-stretch: 84%; letter-spacing: -.01em; line-height: 1 }
.bi-bant > div { flex: 1; min-width: 0 }
.bi-kod { padding: 5px 9px; border-radius: 7px; background: var(--siyah-dugme); color: var(--beyaz); font: 700 13px var(--mono) }
.bi-cubuk { height: 3px; background: #DFE3E6 } .bi-cubuk i { display: block; height: 100%; width: var(--oran, 0%); background: var(--siyah); transition: width .9s cubic-bezier(.16, 1, .3, 1) }
.bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 0; font-weight: 600; font-size: 13px; color: var(--celik-koyu) }
.bi-meta span:last-child { font: 700 14px var(--mono); color: var(--siyah) }
.plt { display: inline-flex; align-items: center; gap: 6px } .plt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tgo) } .plt.ys::before { background: var(--ys) }
.bi-urun { list-style: none; margin: 10px 0 0; padding: 0 14px; display: grid; gap: 8px }
.bi-urun li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start }
.bi-urun li > span { height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--siyah-dugme); color: var(--beyaz); font: 800 14px var(--mono) }
.bi-urun b { display: block; font-size: 16px; font-weight: 750; font-stretch: 90%; line-height: 1.2 } .bi-urun small { display: block; margin-top: 2px; font-size: 13px; color: var(--yazi-2) }
.bi-dugme { margin: 14px 14px 14px; min-height: 46px; display: grid; place-items: center; border-radius: 12px; font-weight: 800; font-size: 16px; color: var(--siyah);
  background: linear-gradient(180deg, #FFF 0%, #E7EAED 34%, #CDD3D8 52%, #DCE1E5 72%, #F2F4F6 100%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #A7AFB7 }
.bilet.yeni .bi-bant { background: #E8F3EC } .bilet.yeni .bi-bant small { color: #1E7A49 }
.bilet.kontrol .bi-bant { background: #FFF4E8 } .bilet.kontrol .bi-bant small { color: #96480A }
.bilet.hazir .bi-dugme, .bilet.yolda .bi-dugme { background: var(--siyah-dugme); color: var(--beyaz); box-shadow: none }
.bilet.yolda .bi-cubuk i, .bilet.hazir .bi-cubuk i { background: #2DB36A }
@media (prefers-reduced-motion: no-preference) {
  .bilet { transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s } .bilet.gecis { transform: translateY(14px); opacity: 0 }
  .ekran-cerceve { animation: ekran-gel 1s cubic-bezier(.16, 1, .3, 1) .15s both } @keyframes ekran-gel { from { opacity: 0; transform: translateY(24px) } }
}
/* yazıcı ağzı: siyah girişin alt kenarında çelik bir yuva; fişler buradan çıkar */
.yazici-agzi { position: relative; z-index: 2; height: 18px; margin-bottom: -9px; border-radius: 6px; background: linear-gradient(180deg, #EEF0F2, #B8BEC4 55%, #DCE0E3); box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(0, 0, 0, .8) }
.yazici-agzi i { position: absolute; left: 14px; right: 14px; top: 7px; height: 4px; border-radius: 2px; background: #0E1012; box-shadow: inset 0 1px 2px #000 }
.aski .fis::before { display: none }
/* çelik plakalar: üç yön, her biri bir plaka */
.plakalar { gap: 14px }
.plakalar div { padding: 24px 24px 26px; border: 0; border-radius: 22px; background: var(--beyaz); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 36px -30px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--cizgi) }
.plakalar svg { width: 30px; height: 30px; margin-bottom: 14px; color: var(--siyah) }
.plakalar dt { font-size: 21px }
/* karşılaştırma: beyaz kart, Ghost Kitchen sütunu belirgin */
.karsi { padding: 6px clamp(18px, 3vw, 36px) 10px; border-radius: 24px; background: var(--beyaz); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 20px 44px -34px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--cizgi) }
.karsi-bas { padding-top: 22px; border-bottom-color: var(--cizgi) }
.karsi-satir:last-child { border-bottom: 0 }
.karsi-satir .bizde::before { background: #2DB36A }

/* ---------- bütün sayfalar: kart dili ---------- */
/* iç sayfa başlığının altında çelik vurgu çubuğu (ana sayfadaki yazıcı ağzının küçük kardeşi) */
.bant-ic::after { content: ""; display: block; width: 112px; height: 7px; margin-top: 36px; border-radius: 4px; background: var(--celik-zemin); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #5F676E }
.kartli { display: grid; gap: 14px }
.deger-liste.kartli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vw, 64px) }
.deger-liste.kartli div, .teknik.kartli li, .konular.kartli li, .kazanc.kartli li { padding: 24px 24px 26px; border: 0; border-radius: 22px; background: var(--beyaz); box-shadow: var(--kart) }
.deger-liste.kartli dd, .teknik.kartli span { margin-top: 8px }
.teknik.kartli { gap: 14px }
.teknik.kartli svg { width: 46px; height: 46px; padding: 11px; border-radius: 13px; background: var(--celik-zemin); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #B8BEC4 }
.teknik.kartli b { margin-top: 18px }
.konular.kartli { margin-top: 30px; gap: 12px } .konular.kartli li { padding: 20px 22px }
.kazanc.kartli { gap: 12px } .kazanc.kartli li { background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 14px 30px -26px rgba(0, 0, 0, .55) } .kazanc.kartli li:last-child { border-bottom: 0 }
.koyu-bolum .kazanc.kartli li { background: #15181B; color: var(--beyaz); box-shadow: inset 0 0 0 1px var(--gece-cizgi) } .koyu-bolum .kazanc.kartli span { color: var(--gece-2) }
.celik-kart .kazanc.kartli li { background: rgba(255, 255, 255, .8) }
/* vizyon ve misyon: iki sütun arasında ince çizgi */
.vm > div + div { position: relative }
.vm > div + div::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: calc(-1 * clamp(20px, 3.5vw, 55px)); width: 1px; background: var(--gece-cizgi) }
/* il il şubeler: kartlar */
.il-grup { padding: 22px 24px 8px; border-radius: 22px; background: var(--beyaz); box-shadow: var(--kart) } .il-grup li:last-child { border-bottom: 0 }
.il-gruplar { gap: 16px }
/* iletişim formu kartı */
.form-kart { padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--beyaz); box-shadow: var(--kart) }
.form-kart .alan input, .form-kart .alan select, .form-kart .alan textarea { background: var(--kagit); border-color: #DDE1E4 } .form-kart .alan input:focus, .form-kart .alan textarea:focus { background: var(--beyaz) }
/* çelik kart: yeni markalar, bilgi kutuları */
.celik-kart { position: relative; overflow: hidden; margin-top: clamp(48px, 7vw, 88px); padding: clamp(26px, 4vw, 48px); border-radius: var(--r); background: var(--celik-zemin); color: var(--siyah) }
.celik-kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--firca); pointer-events: none }
.celik-kart > * { position: relative } .celik-kart h3 { font-size: clamp(32px, 4vw, 54px); font-stretch: 74% } .celik-kart .bolum-yazi { margin-top: 16px; color: #30363B }
/* alt bilgi: platform etiketleri */
.alt-plat { display: flex; gap: 8px; margin-top: 18px }
@media (max-width: 960px) { .vm > div + div::before { display: none } .deger-liste.kartli { grid-template-columns: minmax(0, 1fr) } .celik-kart.iki { gap: 24px } }

/* ---------- sipariş: konuma göre şube seçimi (Uber Eats / Yemeksepeti'nde sipariş verin) ---------- */
.sip-perde { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 14, .55); display: grid; place-items: end center; padding: 0 }
.sip-kutu { width: min(560px, 100%); background: #fff; color: #111; border-radius: 28px 28px 0 0; padding: 22px var(--kenar) max(22px, env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .3); max-height: 88vh; overflow: auto }
@media (min-width: 720px) { .sip-perde { place-items: center; padding: 20px } .sip-kutu { border-radius: 28px; padding: 26px 28px } }
.sip-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 6px }
.sip-ust h2 { margin: 0; font-size: 22px; flex: 1 }
.sip-ust .kapat { border: 0; background: #f1f2f3; border-radius: 999px; width: 40px; height: 40px; font-size: 20px; cursor: pointer }
.sip-kutu p { margin: 0 0 14px; color: #555; font-size: 15px }
.sip-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px }
.sip-sec label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #444 }
.sip-sec select { height: 48px; border: 1.5px solid #d9dcdf; border-radius: 14px; padding: 0 12px; font: inherit; font-size: 16px; background: #fff; color: #111 }
.sip-sec select:disabled { color: #999; background: #f6f7f8 }
.sip-liste { display: grid; gap: 10px }
.sip-sube { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1.5px solid #e4e6e8; border-radius: 18px }
.sip-sube .ad { flex: 1; min-width: 160px } .sip-sube .ad b { display: block; font-size: 16px } .sip-sube .ad small { color: #666 }
.sip-sube .dugme { min-height: 44px; padding: 0 18px; font-size: 14.5px }
.sip-sube .dugme.ue { background: #06C167; color: #000 } .sip-sube .dugme.ys { background: #EA004B; color: #fff }
.sip-yok { padding: 16px; border: 1.5px dashed #d9dcdf; border-radius: 18px; color: #555; font-size: 15px }
html.sip-acik { overflow: hidden }