/* CateringOS · cateringos.com.tr · "Şafak vardiyası" (maket 27.10.2026 → üretim 28.10, com.tr B)
   Renk: Yaver kararı 58 "her yer mavi ailesi" — mor kalmaz (şafak #0694F9, öne çıkan #132E53, dip #06203F, eylem #0A6BC9); safran yalnız dekor.
   Yalnız tanıtım sitesi (cateringos.com.tr) için. Panel ve cateringos.tr kendi dilini kullanır.
   Fontlar kendi sunucumuzdan (woff2, Türkçe alt küme); CDN yok. Lisanslar: fontlar/OFL-*.txt */

@font-face { font-family: "Figtree"; src: url("fontlar/Figtree-tr-wght.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fontlar/Inter-tr-wght.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }

/* ---------- 1. Token'lar ---------- */
:root {
  color-scheme: dark;
  /* Katman yığını: dipten yukarı */
  --gece-0: #090A10;      /* en dip: hero arkası, alt bilgi */
  --gece-1: #0C0F19;      /* sayfa tuvali */
  --gece-2: #101729;      /* yükseltilmiş kart */
  --gece-3: #132E53;      /* öne çıkan yüzey (gece mavisi); tuval olmaz */
  --gece-3-cizgi: #24497A;
  /* Kıl çizgiler */
  --cizgi-1: #161D30;
  --cizgi-2: #1E2841;
  --cizgi-3: #2B3757;
  /* Metin */
  --un: #FFFFFF;
  --sis: #CDD0DA;         /* uzun gövde */
  --kul: #A6ABBB;         /* ikincil */
  --duman: #8C92A5;       /* üçüncül, dipnot (gece-1 üstünde 6,2:1) */
  /* Renk: yalnız iki iş (öne çıkan yüzey + tek gradyan CTA) ve anlamlı durumlar */
  --mavi: #0694F9;        /* marka mavisi (şafak); Sistem Çekirdeği ve panelle ortak */
  --eylem: #0A6BC9;       /* eylem rengi (beyaz metin 5,2:1) */
  --derin: #06203F;
  --lavanta: #7CC4FF;     /* koyu zeminde bağlantı ve vurgu metni (ad korunur; değer açık mavi) */
  --indigo: #0A6BC9;
  --gradyan: linear-gradient(90deg, #08549F 0%, #0A6BC9 100%); /* beyaz metin en kötü 5,2:1 */
  --safran: #E8AC35;      /* yalnız "şu an" ve kor ışıması */
  --biber: #FF6D60;       /* yalnız gıda güvenliği sınır dışı */
  /* Tipografi */
  --f-baslik: "Figtree", "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-govde: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Boşluk (taban 4) */
  --b1: 4px; --b2: 8px; --b3: 12px; --b4: 16px; --b5: 20px; --b6: 24px; --b8: 32px; --b10: 40px; --b16: 64px; --b20: 80px; --b26: 104px;
  /* Köşe */
  --k-kucuk: 6px; --k-girdi: 8px; --k-kart: 12px; --k-hap: 9999px;
  /* Gölge: derinlik gölgeyle, parıltıyla değil */
  --g-kart: 0 4px 28px rgba(0, 0, 0, .45);
  --g-yuzen: 0 22px 36px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .28);
  --g-ic: inset 0 1px 0 rgba(255, 255, 255, .045);
  /* Işıma (A: sade) */
  --isik-hero:
    radial-gradient(62% 78% at 34% -30%, rgba(6, 148, 249, .30) 0, rgba(6, 148, 249, 0) 70%),
    radial-gradient(26% 30% at 92% 104%, rgba(232, 150, 60, .10) 0, rgba(232, 150, 60, 0) 72%);
  --isik-bolum: none;
  --sayfa: 1200px;
  --yan: 40px;
}

/* B varyantı: daha ışıltılı şafak */
[data-v="b"] {
  --isik-hero:
    radial-gradient(64% 70% at 26% -8%, rgba(6, 148, 249, .40) 0, rgba(6, 148, 249, 0) 72%),
    radial-gradient(40% 52% at 80% 14%, rgba(19, 46, 83, .30) 0, rgba(19, 46, 83, 0) 70%),
    radial-gradient(36% 40% at 94% 100%, rgba(236, 150, 58, .24) 0, rgba(236, 150, 58, 0) 72%);
  --isik-bolum:
    radial-gradient(48% 46% at 50% 46%, rgba(6, 148, 249, .15) 0, rgba(6, 148, 249, 0) 72%);
  --gece-3: #132E53;
  --gece-3-cizgi: #2A5288;
}
[data-v="b"] .masa::before { content: ""; position: absolute; inset: -12% -10% -14% -14%; z-index: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(6, 148, 249, .22) 0, rgba(6, 148, 249, 0) 70%); pointer-events: none; }
[data-v="b"] .ekran.ana { border-color: #24406A; box-shadow: var(--g-yuzen), inset 0 1px 0 rgba(124, 196, 255, .22); }
[data-v="b"] .ust-etiket .nokta { box-shadow: 0 0 0 4px rgba(232, 172, 53, .22), 0 0 14px rgba(232, 172, 53, .5); }

/* ---------- 2. Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--gece-1); color: var(--sis);
  font: 400 16px/1.55 var(--f-govde); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  font-feature-settings: "calt" 1;
}
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; color: var(--un); font-family: var(--f-baslik); font-weight: 500; letter-spacing: -0.024em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sayi { font-variant-numeric: tabular-nums; }
.kap { width: 100%; max-width: calc(var(--sayfa) + 2 * var(--yan)); margin: 0 auto; padding: 0 var(--yan); }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--safran); outline-offset: 3px; border-radius: 4px; }
.atla { position: absolute; left: 12px; top: -60px; background: var(--un); color: #0A0B10; padding: 10px 16px; border-radius: var(--k-hap); z-index: 50; font-weight: 500; text-decoration: none; }
.atla:focus { top: 12px; }

/* ---------- 3. Düğmeler (hap) ---------- */
.hap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: var(--k-hap);
  font: 500 15px/1 var(--f-govde); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; transition: background-color .16s, border-color .16s, transform .16s;
}
.hap-beyaz { background: #FFFFFF; color: #0A0B10; }
.hap-beyaz:hover { background: #E7E8EE; }
.hap-hayalet { background: transparent; color: var(--un); border-color: #6E7488; }
.hap-hayalet:hover { border-color: var(--un); }
.hap-gradyan { background: var(--gradyan); color: #FFFFFF; box-shadow: 0 6px 22px rgba(10, 107, 201, .32); }
.hap-gradyan:hover { filter: brightness(1.08); }
.hap .ok { transition: transform .16s; }
.hap:hover .ok { transform: translateX(3px); }
.hap-kucuk { min-height: 38px; padding: 0 16px; font-size: 14px; }
.bag { color: var(--lavanta); text-decoration: underline; text-decoration-color: rgba(124, 196, 255, .4); text-underline-offset: 4px; font-weight: 500; }
.bag:hover { text-decoration-color: var(--lavanta); }

/* ---------- 4. Üst çubuk ---------- */
.ust { position: sticky; top: 0; z-index: 20; background: rgba(9, 10, 16, .78); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(30, 40, 65, .6); }
.ust .kap { display: flex; align-items: center; height: 64px; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--un); font: 500 19px/1 var(--f-baslik); letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 26px; flex: none; }
.logo svg.logo-tam { width: 128px; height: 28px; } /* 29.10: logo 07 yatay kilit (457,76 × 100); eski işaret + yazı biçimi de bozulmadan çalışır (statik önce yayını) */
.menu { display: flex; gap: 26px; margin-left: 12px; }
.menu a { color: var(--kul); text-decoration: none; font-size: 14.5px; padding: 12px 0; }
.menu a:hover, .menu a[aria-current] { color: var(--un); }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ust-sag .giris { color: var(--sis); text-decoration: none; font-size: 14.5px; padding: 12px 10px; }
.menu-dugme { display: none; }

/* ---------- 5. Kahraman (hero) ---------- */
.hero { position: relative; isolation: isolate; background: var(--gece-0); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--isik-hero); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; background: linear-gradient(to bottom, rgba(12, 15, 25, 0), var(--gece-1)); }
.hero .kap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 112px; }
.ust-etiket { display: inline-flex; align-items: center; gap: 10px; color: var(--kul); font-size: 14px; font-weight: 500; margin-bottom: 22px; }
.ust-etiket .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--safran); box-shadow: 0 0 0 4px rgba(232, 172, 53, .16); }
.hero h1 { font-size: 64px; line-height: 1.0; letter-spacing: -0.034em; }
.hero h1 .ikinci { display: block; margin-top: 18px; font-size: .5em; line-height: 1.15; letter-spacing: -0.022em; color: #B9BDCC; }
.hero .giris-metni { margin-top: 24px; font-size: 18.5px; line-height: 1.55; font-weight: 350; color: var(--sis); max-width: 34em; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.guvenceler { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--kul); font-size: 14px; }
.guvenceler li { display: inline-flex; align-items: center; gap: 8px; }
.guvenceler svg { width: 16px; height: 16px; color: var(--lavanta); flex: none; }

/* Ürün ekranı kesitleri (hero sağı) */
.masa { position: relative; }
.ekran { background: var(--gece-2); border: 1px solid var(--cizgi-2); border-radius: var(--k-kart); box-shadow: var(--g-yuzen), var(--g-ic); }
.ekran-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--cizgi-1); }
.ekran-bas h3 { font: 600 15px/1.2 var(--f-govde); letter-spacing: -0.01em; }
.ekran-bas .meta { color: var(--duman); font-size: 12.5px; white-space: nowrap; }
.ekran-bas .simdi { display: inline-flex; align-items: center; gap: 6px; color: var(--safran); }
.ekran-bas .simdi::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--safran); }
.uretim { width: 100%; border-collapse: collapse; font-size: 13px; }
.uretim th { text-align: left; font-weight: 500; color: var(--duman); padding: 10px 12px 8px; font-size: 12px; }
.uretim td { padding: 10px 12px; border-top: 1px solid var(--cizgi-1); color: var(--sis); white-space: nowrap; }
.uretim td:first-child, .uretim th:first-child { padding-left: 20px; }
.uretim td:last-child, .uretim th:last-child { padding-right: 20px; }
.uretim .ad { color: var(--un); font-weight: 500; white-space: normal; }
.uretim .sag { text-align: right; }
.durum { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sis); }
.durum i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--kul); flex: none; }
.durum.suan i { background: var(--safran); border-color: var(--safran); }
.durum.hazir i { background: var(--lavanta); border-color: var(--lavanta); }
.durum.ihlal { color: var(--biber); }
.durum.ihlal i { border-radius: 1px; transform: rotate(45deg); background: var(--biber); border-color: var(--biber); width: 6px; height: 6px; }
.isi-ihlal { color: var(--biber); }
.masa .ana { position: relative; z-index: 1; }
.uretim .dahasi td { color: var(--duman); font-size: 12.5px; padding-bottom: 52px; }
.yuzenler { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 16px; margin: -48px -18px 0 -30px; }
.yuzen { position: relative; padding: 16px 18px; border-radius: var(--k-kart); }
.yuzen-maliyet { flex: 1.15; min-width: 0; background: var(--gece-3); border: 1px solid var(--gece-3-cizgi); box-shadow: var(--g-yuzen), var(--g-ic); }
.yuzen-isi { flex: 1; min-width: 0; margin-top: 34px; background: #121A2E; border: 1px solid var(--cizgi-3); box-shadow: var(--g-yuzen), var(--g-ic); }
.yuzen .etk { font-size: 12px; color: var(--kul); font-weight: 500; }
.yuzen .buyuk { font: 500 34px/1.05 var(--f-baslik); letter-spacing: -0.03em; color: var(--un); margin-top: 6px; }
.yuzen .kucuk { font-size: 12.5px; color: var(--sis); margin-top: 8px; line-height: 1.45; }
.yuzen .kucuk b { color: var(--un); font-weight: 600; }
.yuzen-isi .buyuk { color: var(--biber); }
.yuzen-isi .mini-dugme { margin-top: 12px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--k-hap); border: 1px solid #6E7488; color: var(--un); font-size: 12.5px; font-weight: 500; }
.temsili { position: relative; z-index: 3; margin-top: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--duman); font-size: 12px; }
.temsili::before { content: ""; width: 12px; height: 1px; background: var(--duman); }

/* ---------- 6. Bölümler ---------- */
.bolum { position: relative; padding: var(--b20) 0; }
.bolum.isikli { isolation: isolate; }
.bolum.isikli::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--isik-bolum); pointer-events: none; }
.bolum-bas { max-width: 720px; margin-bottom: 44px; }
.bolum-bas.orta { margin-left: auto; margin-right: auto; text-align: center; }
.on-etiket { display: block; color: var(--kul); font-size: 13.5px; font-weight: 500; margin-bottom: 14px; }
.bolum h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; }
.bolum-bas p { margin-top: 16px; font-size: 17.5px; font-weight: 350; color: var(--kul); line-height: 1.55; }
.bolum-bas.orta p { margin-left: auto; margin-right: auto; max-width: 600px; }

/* Gün akışı: kontrol masası rayı */
.ray { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 8px; padding-top: 38px !important; }
.ray::before { content: ""; position: absolute; left: 0; right: 0; top: 71px; height: 2px; background: var(--cizgi-2); border-radius: 2px; }
.ray::after { content: ""; position: absolute; left: 0; width: var(--gecen, 33%); top: 71px; height: 2px; background: linear-gradient(90deg, rgba(124, 196, 255, .25), var(--lavanta)); border-radius: 2px; }
.adim { position: relative; padding-right: 28px; }
.adim time { display: block; font: 500 15px/1 var(--f-govde); color: var(--kul); font-variant-numeric: tabular-nums; }
.adim .tik { display: block; width: 12px; height: 12px; margin: 13px 0 20px; border-radius: 50%; background: var(--gece-1); border: 2px solid var(--cizgi-3); position: relative; z-index: 1; }
.adim.gecti .tik { border-color: var(--lavanta); background: var(--lavanta); }
.adim h3 { font-size: 21px; letter-spacing: -0.02em; }
.adim p { margin-top: 8px; font-size: 14.5px; color: var(--kul); line-height: 1.5; }
.imlec { position: absolute; top: 0; left: calc(var(--gecen, 33%) + 6px); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; }
.imlec span { font-size: 12.5px; font-weight: 600; color: #1A1203; background: var(--safran); padding: 3px 8px; border-radius: var(--k-hap); white-space: nowrap; }
.imlec i { width: 2px; height: 41px; background: linear-gradient(var(--safran), rgba(232, 172, 53, .35)); }
.imlec b { width: 10px; height: 10px; border-radius: 50%; background: var(--safran); box-shadow: 0 0 0 5px rgba(232, 172, 53, .18); }

/* Modüller: bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.kart { background: var(--gece-2); border: 1px solid var(--cizgi-1); border-radius: var(--k-kart); padding: 28px; box-shadow: var(--g-ic); }
.kart.one { background: var(--gece-3); border-color: var(--gece-3-cizgi); }
.kart h3 { font-size: 24px; letter-spacing: -0.02em; }
.kart > p { margin-top: 10px; color: var(--kul); font-size: 15px; line-height: 1.55; max-width: 36em; }
.kart.one > p { color: #C3D3E8; }
.g7 { grid-column: span 7; } .g5 { grid-column: span 5; } .g6 { grid-column: span 6; } .g4 { grid-column: span 4; } .g8 { grid-column: span 8; } .g12 { grid-column: span 12; }
.liste { margin-top: 18px; display: grid; gap: 8px; }
.liste li { display: flex; gap: 10px; font-size: 14.5px; color: var(--sis); line-height: 1.45; }
.liste li svg { width: 16px; height: 16px; margin-top: 2px; color: #93A9C4; flex: none; }
.kart.one .liste li svg { color: var(--lavanta); }
.kesit { margin-top: 22px; background: rgba(9, 10, 16, .55); border: 1px solid var(--cizgi-2); border-radius: 10px; overflow: hidden; }
.kart.one .kesit { background: rgba(4, 16, 34, .55); border-color: var(--gece-3-cizgi); }
.kesit-bas { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--duman); border-bottom: 1px solid var(--cizgi-1); }
.kart.one .kesit-bas { border-color: rgba(42, 82, 136, .6); color: #A7BBD3; }
.kesit-bas b { color: var(--un); font-weight: 600; }
.satir { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 13.5px; border-top: 1px solid var(--cizgi-1); color: var(--sis); }
.kart.one .satir { border-color: rgba(42, 82, 136, .45); }
.satir:first-of-type { border-top: 0; }
.satir .s { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--un); }
.satir .s.isi-ihlal { color: var(--biber); }
.satir small { display: block; color: var(--duman); font-size: 12px; margin-top: 2px; }
.kart.one .satir small { color: #A7BBD3; }
.satir.toplam { background: rgba(6, 148, 249, .12); }
.satir.toplam .s { font: 500 18px/1 var(--f-baslik); }
.not-satiri { padding: 12px 16px; font-size: 13px; color: var(--sis); border-top: 1px solid var(--cizgi-1); }
.kart.one .not-satiri { border-color: rgba(42, 82, 136, .45); }
.not-satiri b { color: var(--un); }

/* Üstünlükler şeridi */
.ustunluk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cizgi-2); border-bottom: 1px solid var(--cizgi-2); }
.ustunluk li { padding: 28px 24px 28px 0; }
.ustunluk li + li { padding-left: 24px; border-left: 1px solid var(--cizgi-1); }
.ustunluk svg { width: 22px; height: 22px; color: var(--lavanta); }
.ustunluk h3 { margin-top: 14px; font: 600 16px/1.3 var(--f-govde); letter-spacing: -0.01em; }
.ustunluk p { margin-top: 6px; font-size: 14px; color: var(--kul); line-height: 1.5; }

/* Paket kartları */
.paketler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.paket { position: relative; display: flex; flex-direction: column; background: var(--gece-2); border: 1px solid var(--cizgi-2); border-radius: var(--k-kart); padding: 28px; box-shadow: var(--g-kart), var(--g-ic); }
.paket.one { background: var(--gece-3); border-color: var(--gece-3-cizgi); }
.paket h3 { font-size: 26px; }
.paket .kime { margin-top: 6px; color: var(--kul); font-size: 14.5px; }
.paket.one .kime { color: #C3D3E8; }
.rozet { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 600; color: #DCEEFF; background: rgba(6, 148, 249, .28); border: 1px solid rgba(124, 196, 255, .35); padding: 5px 11px; border-radius: var(--k-hap); }
.fiyat { margin-top: 26px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fiyat .tutar { font: 500 46px/1 var(--f-baslik); letter-spacing: -0.035em; color: var(--un); font-variant-numeric: tabular-nums; }
.fiyat .birim { color: var(--kul); font-size: 15px; }
.fiyat-alt { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--duman); }
.paket.one .fiyat-alt { color: #A9BCD6; }
.fiyat-alt s { color: inherit; }
.fiyat-alt .lansman { color: var(--lavanta); font-weight: 500; }
.paket .liste { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cizgi-2); flex: 1; align-content: start; }
.paket.one .liste { border-color: rgba(42, 82, 136, .7); }
.paket .hap { margin-top: 26px; width: 100%; }
.yillik-fiyat { display: none; }
.dipnot { margin-top: 22px; color: var(--duman); font-size: 13.5px; line-height: 1.6; }
.dipnot b { color: var(--sis); font-weight: 500; }

/* Güven */
.guven { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guven .kart { padding: 24px; }
.guven .kart h3 { font: 600 16.5px/1.3 var(--f-govde); letter-spacing: -0.01em; margin-top: 16px; }
.guven .kart p { margin-top: 8px; font-size: 14px; }
.guven .simge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(6, 148, 249, .12); border: 1px solid rgba(6, 148, 249, .28); color: var(--lavanta); }
.guven .simge svg { width: 20px; height: 20px; }
.durust { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 14px; color: var(--kul); }

/* Demo formu */
.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.demo .yan p { margin-top: 16px; color: var(--kul); font-size: 17px; font-weight: 350; line-height: 1.6; }
.demo .yan ul { margin-top: 28px; display: grid; gap: 12px; }
.demo .yan li { display: flex; gap: 10px; color: var(--sis); font-size: 15px; }
.demo .yan li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--lavanta); flex: none; }
.demo .yan .eposta { margin-top: 28px; font-size: 15px; color: var(--kul); }
.form { background: var(--gece-2); border: 1px solid var(--cizgi-2); border-radius: 16px; padding: 32px; box-shadow: var(--g-kart), var(--g-ic); }
.alan { display: grid; gap: 8px; }
.alan + .alan, .ikili + .alan, .alan + .ikili { margin-top: 18px; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ikili .alan + .alan { margin-top: 0; }
label, .alan-adi { font-size: 14px; font-weight: 500; color: var(--un); }
.alan-adi small, label small { color: var(--duman); font-weight: 400; }
input[type="text"], input[type="email"], textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--k-girdi);
  background: var(--gece-1); border: 1px solid #5C6787; color: var(--un);
  font: 400 16px/1.4 var(--f-govde); transition: border-color .16s, box-shadow .16s;
}
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8A90A3; }
input:focus, textarea:focus { outline: none; border-color: var(--lavanta); box-shadow: 0 0 0 3px rgba(124, 196, 255, .22); }
.alan.hata input { border-color: var(--biber); }
.hata-metni { display: flex; gap: 6px; align-items: center; color: #FF9187; font-size: 13px; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cipler legend { padding: 0; margin-bottom: 8px; }
.cip { position: relative; }
.cip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--k-hap); border: 1px solid var(--cizgi-3); color: var(--sis); font-size: 14.5px; font-variant-numeric: tabular-nums; transition: background-color .16s, border-color .16s; }
.cip input:checked + span { background: rgba(6, 148, 249, .2); border-color: var(--lavanta); color: var(--un); }
.cip input:focus-visible + span { outline: 2px solid var(--safran); outline-offset: 3px; }
.onay { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 14px; color: var(--sis); font-weight: 400; line-height: 1.5; }
.onay input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--eylem); flex: none; }
.form .alt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.form .alt .hap { min-width: 180px; }
.form .alt small { color: var(--duman); font-size: 13px; }
.bal { position: absolute; left: -9999px; }
.tamam { display: none; text-align: left; }
.tamam .tik-buyuk { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 148, 249, .18); border: 1px solid rgba(124, 196, 255, .4); color: var(--lavanta); }
.tamam h3 { margin-top: 18px; font-size: 26px; }
.tamam p { margin-top: 10px; color: var(--kul); }
[data-durum="tamam"] .form-govde { display: none; }
[data-durum="tamam"] .tamam { display: block; }

/* Son çağrı */
.son { position: relative; isolation: isolate; text-align: center; padding: 96px 0; overflow: hidden; border-top: 1px solid var(--cizgi-1); }
.son::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 90% at 50% 120%, rgba(6, 148, 249, .26) 0, rgba(6, 148, 249, 0) 70%); }
[data-v="b"] .son::before { background: radial-gradient(52% 100% at 50% 120%, rgba(6, 148, 249, .42) 0, rgba(6, 148, 249, 0) 70%), radial-gradient(22% 60% at 82% 120%, rgba(236, 150, 58, .18) 0, rgba(236, 150, 58, 0) 70%); }
.son h2 { font-size: 48px; line-height: 1.05; letter-spacing: -0.032em; }
.son p { margin: 16px auto 0; max-width: 560px; color: var(--kul); font-size: 17px; font-weight: 350; }
.son .eylemler { justify-content: center; }

/* Alt bilgi */
.alt-bilgi { background: var(--gece-0); border-top: 1px solid var(--cizgi-1); padding: 56px 0 40px; font-size: 14px; color: var(--kul); }
.alt-bilgi .ust-sira { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.alt-bilgi h4 { font: 600 13.5px/1 var(--f-govde); color: var(--un); letter-spacing: 0; margin-bottom: 14px; }
.alt-bilgi ul { display: grid; gap: 4px; }
.alt-bilgi a { color: var(--kul); text-decoration: none; display: inline-block; padding: 4px 0; }
.alt-bilgi a:hover { color: var(--un); }
.alt-bilgi .logo { display: inline-flex; padding: 0; color: var(--un); }
.alt-bilgi .tanim { margin-top: 14px; max-width: 26em; line-height: 1.55; }
.alt-bilgi .alt-sira { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--cizgi-1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--duman); font-size: 13px; }
.alt-bilgi .alt-sira a { color: var(--sis); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(205, 208, 218, .35); padding: 0; }

/* ---------- 7. Paketler sayfası ---------- */
.p-hero { position: relative; isolation: isolate; background: var(--gece-0); overflow: hidden; text-align: center; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--isik-hero); }
.p-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; background: linear-gradient(to bottom, rgba(12, 15, 25, 0), var(--gece-1)); }
.p-hero .kap { padding-top: 76px; padding-bottom: 40px; }
.p-hero h1 { font-size: 56px; line-height: 1.04; letter-spacing: -0.034em; }
.p-hero p { margin: 18px auto 0; max-width: 620px; font-size: 18px; font-weight: 350; color: var(--sis); }
.donem { display: inline-flex; margin-top: 30px; padding: 4px; border-radius: var(--k-hap); background: var(--gece-2); border: 1px solid var(--cizgi-2); }
.donem label { position: relative; }
.donem input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.donem span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--k-hap); color: var(--kul); font-size: 14.5px; font-weight: 500; }
.donem input:checked + span { background: #FFFFFF; color: #0A0B10; }
.donem input:focus-visible + span { outline: 2px solid var(--safran); outline-offset: 2px; }
.lansman-seridi { display: block; max-width: 640px; margin: 20px auto 0; color: var(--sis); font-size: 14px; line-height: 1.6; }
.lansman-seridi b { color: var(--un); font-weight: 600; }
.lansman-seridi .nokta { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; width: 7px; height: 7px; border-radius: 50%; background: var(--safran); }
body:has(#d-yillik:checked) .aylik-fiyat { display: none; }
body:has(#d-yillik:checked) .yillik-fiyat { display: flex; }
.paketler.alti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hepsinde { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 1px solid var(--cizgi-2); border-radius: var(--k-kart); background: rgba(16, 23, 41, .6); }
.hepsinde li { padding: 20px 22px; font-size: 14px; color: var(--sis); display: flex; gap: 10px; }
.hepsinde li + li { border-left: 1px solid var(--cizgi-1); }
.hepsinde svg { width: 18px; height: 18px; color: var(--lavanta); flex: none; margin-top: 1px; }
.sss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sss .kart h3 { font: 600 16.5px/1.35 var(--f-govde); letter-spacing: -0.01em; }
.sss .kart p { margin-top: 8px; font-size: 14.5px; }

/* ---------- 8. Üretim ekleri (com.tr B, 28.10) ---------- */
/* Yakında: canlıda olmayan özellik etkin olanlardan açıkça ayrılır (Mac/Yaver kararı) */
.ustunluk.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yakinda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; padding: 16px 20px; border: 1px dashed var(--cizgi-3); border-radius: var(--k-kart); color: var(--kul); font-size: 14px; }
.yakinda-rozet { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--k-hap); background: rgba(232, 172, 53, .14); border: 1px solid rgba(232, 172, 53, .45); color: #F3C66B; font-size: 12.5px; font-weight: 600; }
.yakinda b { color: var(--sis); font-weight: 600; }
.ornek { color: #9298AB; font-weight: 400; } /* Mac 29.10: --duman #132E53 kart üstünde 4,39:1 → bir ton açık 4,73:1 (yalnız bu etiket) */
/* Demo formu: KVKK notu, açık rıza ayrı kutu, gönderim durumları */
.kvkk-not { margin-top: 22px; font-size: 13.5px; color: var(--kul); line-height: 1.55; }
.form .onay { margin-top: 14px; }
.onay small { display: block; color: var(--duman); font-size: 12.5px; margin-top: 2px; }
.form-hata { margin-top: 16px; padding: 12px 14px; border-radius: var(--k-girdi); background: rgba(255, 109, 96, .08); border: 1px solid rgba(255, 109, 96, .45); color: #FFB3AC; font-size: 14px; }
[data-durum="gonderiliyor"] button[type="submit"] { opacity: .65; pointer-events: none; }
/* Telefon menüsü */
.menu .yalniz-mobil { display: none; }
@media (max-width: 900px) {
  .ust.acik .menu { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 6px var(--yan) 14px; background: rgba(9, 10, 16, .97); border-bottom: 1px solid var(--cizgi-2); }
  .ust.acik .menu a { padding: 14px 0; border-top: 1px solid var(--cizgi-1); font-size: 16px; color: var(--sis); }
  .ust.acik .menu .yalniz-mobil { display: block; }
  .ustunluk.uc { grid-template-columns: 1fr; }
}

/* ---------- 9. Duyarlı ---------- */
@media (max-width: 1180px) {
  .hero .kap { grid-template-columns: 1fr; gap: 72px; }
  .masa { max-width: 640px; }
  .guven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ustunluk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ustunluk li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ustunluk li:nth-child(n+3) { border-top: 1px solid var(--cizgi-1); }
  .demo { grid-template-columns: 1fr; gap: 40px; }
  .paketler, .paketler.alti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hepsinde { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .menu, .ust-sag .giris { display: none; }
  .menu-dugme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--k-hap); border: 1px solid var(--cizgi-3); background: transparent; color: var(--un); }
  .bento > * { grid-column: span 12; }
  .sss { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --yan: 20px; }
  body { font-size: 16px; }
  .ust .kap { height: 60px; gap: 12px; }
  .ust-sag { gap: 8px; }
  .hero .kap { padding-top: 44px; padding-bottom: 72px; gap: 56px; }
  .hero h1 { font-size: 40px; line-height: 1.06; letter-spacing: -0.03em; }
  .hero .giris-metni { font-size: 17px; margin-top: 18px; }
  .eylemler { margin-top: 26px; }
  .eylemler .hap { flex: 1 1 100%; min-height: 50px; }
  .masa { min-height: 0; }
  .masa .ana { margin: 0; }
  .uretim .gizle-mobil, .ekran-bas .gizle-mobil { display: none; }
  .yuzenler { flex-direction: column; gap: 12px; margin: -40px 0 0 0; }
  .yuzen-maliyet { margin-right: 30px; align-self: stretch; }
  .yuzen-isi { margin: 0 0 0 30px; align-self: stretch; }
  .uretim .dahasi td { padding-bottom: 46px; }
  .hero h1 .ikinci { font-size: .58em; margin-top: 14px; }
  .bolum { padding: 56px 0; }
  .bolum h2 { font-size: 32px; line-height: 1.1; }
  .bolum-bas { margin-bottom: 32px; }
  .bolum-bas p { font-size: 16.5px; }
  .ray { grid-template-columns: 1fr; gap: 0; padding-left: 28px !important; padding-top: 0 !important; }
  .ray::before, .ray::after { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .ray::after { bottom: auto; height: var(--gecen-dikey, 44%); }
  .adim { padding: 0 0 26px 0; }
  .adim .tik { position: absolute; left: -28px; top: 2px; margin: 0; }
  .adim time { margin-bottom: 6px; }
  .adim h3 { font-size: 19px; }
  .imlec { left: -28px; top: var(--imlec-dikey, 41%); transform: translate(0, -50%); flex-direction: row; gap: 0; }
  .imlec i { width: 14px; height: 2px; order: 2; }
  .imlec b { order: 1; }
  .imlec span { order: 3; }
  .kart { padding: 22px; }
  .kart h3 { font-size: 21px; }
  .ustunluk { grid-template-columns: 1fr; }
  .ustunluk li, .ustunluk li + li { padding: 22px 0; border-left: 0; }
  .ustunluk li + li { border-top: 1px solid var(--cizgi-1); }
  .paketler, .paketler.alti { grid-template-columns: 1fr; }
  .paket { padding: 24px; }
  .guven { grid-template-columns: 1fr; }
  .form { padding: 22px; border-radius: 14px; }
  .ikili { grid-template-columns: 1fr; gap: 18px; }
  .form .alt .hap { width: 100%; min-height: 50px; }
  .son { padding: 64px 0; }
  .son h2 { font-size: 32px; }
  .alt-bilgi .ust-sira { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .alt-bilgi .ust-sira > div:first-child { grid-column: 1 / -1; }
  .alt-bilgi ul a { padding: 10px 0; }
  .alt-bilgi ul { gap: 0; }
  .p-hero .kap { padding-top: 44px; }
  .p-hero h1 { font-size: 38px; }
  .p-hero p { font-size: 16.5px; }
  .hepsinde { grid-template-columns: 1fr; }
  .hepsinde li + li { border-left: 0; border-top: 1px solid var(--cizgi-1); }
  .fiyat .tutar { font-size: 42px; }
  .ust .hap-kucuk { padding: 0 14px; min-height: 44px; }
  :root { --isik-hero: radial-gradient(110% 60% at 30% -18%, rgba(6, 148, 249, .30) 0, rgba(6, 148, 249, 0) 70%); }
  [data-v="b"] { --isik-hero: radial-gradient(120% 70% at 30% -20%, rgba(6, 148, 249, .46) 0, rgba(6, 148, 249, 0) 72%), radial-gradient(60% 40% at 100% 100%, rgba(236, 150, 58, .16) 0, rgba(236, 150, 58, 0) 72%); }
}
@media (max-width: 380px) { .logo span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }