@import url('../font/fontlar.css');

/* ===========================================================================
   KILIÇ ECZA DEPOSU — tasarım sistemi
   Karar geçmişi ve yasaklar listesi: /belge/tasarim.md
   Bu dosyadaki token'ları kullan; sayfa başına yeni sistem üretme.
   =========================================================================== */

:root {
  /* --- Renk: 7 rollü mimari ---------------------------------------------
     Markada iki renk var (lacivert + kırmızı). Lacivert YAPISAL (ink ailesi),
     kırmızı tek AKSİYON rengi. Kırmızı asla geniş yüzey olarak kullanılmaz. */
  --paper:        #f4f6fa;   /* sayfa zemini — soğuk, klinik */
  --mist:         #e8edf5;   /* ikincil zemin */
  --mist-deep:    #dbe2ee;   /* görsel kuyusu, seçili durum */
  --surface:      #ffffff;   /* kart, form */

  --ink:          #12112a;   /* en koyu bant — hero, footer */
  --ink-2:        #1b1940;   /* koyu bant varyantı */
  --ink-3:        #2e2a5c;   /* LOGO LACİVERTİ — yapısal vurgu */
  --ink-metin:    #16152e;   /* gövde metni */

  --steel:        #575b78;   /* ikincil metin */
  --steel-light:  #8b90ab;   /* üçüncül metin, meta */

  --line:         #e1e6f0;   /* hairline ayraç */
  --line-strong:  #c7cfe0;   /* belirgin kontur */

  --brand:        #d0192a;   /* LOGO KIRMIZISI — yalnız aksiyon */
  --brand-koyu:   #a81222;   /* basılı/hover koyu */
  --brand-wash:   #fdedef;   /* aksiyonun açık zemini */

  --uyari:        #b4560c;
  --basari:       #0f7a52;

  /* --- Tipografi --------------------------------------------------------- */
  --yazi-baslik: 'Montserrat', 'Montserrat Fallback', sans-serif;
  --yazi-govde:  'Figtree', 'Figtree Fallback', sans-serif;
  --yazi-mono:   'JetBrains Mono', ui-monospace, monospace;

  --t-devasa:  clamp(2.75rem, 6.2vw, 5.25rem);
  --t-display: clamp(2.25rem, 4.4vw, 3.75rem);
  --t-baslik1: clamp(1.85rem, 3.1vw, 2.75rem);
  --t-baslik2: clamp(1.4rem,  2.1vw, 1.85rem);
  --t-baslik3: clamp(1.15rem, 1.5vw, 1.3rem);
  --t-govde:   1.0625rem;      /* 17px — ajans standardı */
  --t-kucuk:   0.9375rem;
  --t-mini:    0.8125rem;

  /* --- Ölçü -------------------------------------------------------------- */
  --kap:        min(100%, 1440px);
  --oluk:       clamp(20px, 5vw, 72px);
  --bolum:      clamp(4.5rem, 9vw, 8rem);
  --bolum-dar:  clamp(3rem, 6vw, 5rem);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* --- Derinlik: 3 kademeli adlandırılmış sistem -------------------------
     Hiçbir yüzey düz/gölgesiz kalmaz — her kart kontur + gölge taşır. */
  --golge-raised:   0 1px 2px rgba(18, 17, 42, .05), 0 2px 8px rgba(18, 17, 42, .045);
  --golge-lifted:   0 2px 4px rgba(18, 17, 42, .06), 0 10px 26px rgba(18, 17, 42, .09);
  --golge-floating: 0 4px 10px rgba(18, 17, 42, .09), 0 22px 48px rgba(18, 17, 42, .16);
  --golge-brand:    0 1px 2px rgba(168, 18, 34, .22), 0 6px 18px rgba(168, 18, 34, .26);

  /* --- Hareket: ajans imza eğrileri -------------------------------------- */
  --gecis:   cubic-bezier(.16, 1, .3, 1);
  --cekmece: cubic-bezier(.32, .72, 0, 1);
  --sure:    240ms;
}

/* Ölçü uyumlu yedek fontlar — font yüklenene kadar CLS≈0 */
@font-face { font-family: 'Montserrat Fallback'; src: local('Helvetica Neue'), local('Arial');
             size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'Figtree Fallback'; src: local('Helvetica Neue'), local('Arial');
             size-adjust: 98%; ascent-override: 94%; descent-override: 25%; }

/* ===========================================================================
   TEMEL
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
/* 2K / 4K ekranlarda ölçek büyüt */
@media (min-width: 2200px) { html { font-size: 17.5px; } }
@media (min-width: 3000px) { html { font-size: 19px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-metin);
  font-family: var(--yazi-govde);
  font-size: var(--t-govde);
  line-height: 1.65;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-acik { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-baslik1); }
h3 { font-size: var(--t-baslik2); letter-spacing: -.015em; }
h4 { font-size: var(--t-baslik3); letter-spacing: -.01em; }

p  { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: .18em; transition: color var(--sure) var(--gecis); }
a:hover { color: var(--brand); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
li::marker { color: var(--brand); }

strong, b { font-weight: 650; color: var(--ink); }

::selection { background: var(--ink-3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Teknik veri her zaman mono + hizalı rakam (UN 1170, CAS 64-17-5, telefon) */
.mono, .teknik { font-family: var(--yazi-mono); font-variant-numeric: tabular-nums;
                 font-feature-settings: 'tnum' 1; letter-spacing: -.01em; }

.gizli-erisim {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla-baglanti {
  position: absolute; left: 50%; translate: -50% -140%; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: translate 180ms var(--gecis);
}
.atla-baglanti:focus { translate: -50% 0; color: #fff; }

/* ===========================================================================
   DÜZEN
   =========================================================================== */
.kap { width: var(--kap); margin-inline: auto; padding-inline: var(--oluk); }
.kap-dar { width: min(100%, 980px); margin-inline: auto; padding-inline: var(--oluk); }

.bolum { padding-block: var(--bolum); }
.bolum-dar { padding-block: var(--bolum-dar); }

/* Koyu bant — ritim bu bantlarla kuruluyor (aksiyon rengiyle değil) */
.bant-ink   { background: var(--ink);   color: #e7e8f2; }
.bant-ink-2 { background: var(--ink-2); color: #e7e8f2; }
.bant-mist  { background: var(--mist); }
.bant-ink h1, .bant-ink h2, .bant-ink h3, .bant-ink h4,
.bant-ink-2 h1, .bant-ink-2 h2, .bant-ink-2 h3, .bant-ink-2 h4 { color: #fff; }
.bant-ink p, .bant-ink-2 p { color: #b9bcd4; }

/* ===========================================================================
   KICKER — ajans imzası: kısa kırmızı çizgi + büyük harf mono etiket
   Her bölüm başlığının önünde.
   =========================================================================== */
.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--yazi-mono); font-size: var(--t-mini); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--brand);
  margin-bottom: 1.1rem;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--brand); flex: none; }
.bant-ink .kicker, .bant-ink-2 .kicker { color: #ff8b95; }
.bant-ink .kicker::before, .bant-ink-2 .kicker::before { background: var(--brand); }

.bolum-basi { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.bolum-basi p { color: var(--steel); font-size: 1.125rem; }
.bant-ink .bolum-basi p, .bant-ink-2 .bolum-basi p { color: #a9acc6; }

/* ===========================================================================
   BUTONLAR
   =========================================================================== */
.btn {
  --btn-zemin: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--yazi-govde); font-size: var(--t-kucuk); font-weight: 600;
  letter-spacing: -.005em; line-height: 1;
  padding: .95rem 1.6rem; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: background var(--sure) var(--gecis), box-shadow var(--sure) var(--gecis),
              transform 120ms var(--gecis), color var(--sure) var(--gecis),
              border-color var(--sure) var(--gecis);
}
.btn:active { transform: translateY(1px) scale(.975); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-brand { background: var(--brand); color: #fff; box-shadow: var(--golge-brand); }
.btn-ink   { background: var(--ink);   color: #fff; box-shadow: var(--golge-raised); }
.btn-cizgi {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn-cizgi-acik {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}
.btn-whatsapp { background: #1ba84f; color: #fff; box-shadow: 0 1px 2px rgba(11,90,42,.2), 0 6px 18px rgba(11,90,42,.24); }
.btn-sm { padding: .68rem 1.1rem; font-size: var(--t-mini); }
.btn-blok { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover  { background: var(--brand-koyu); color: #fff; box-shadow: var(--golge-lifted); }
  .btn-ink:hover    { background: var(--ink-3); color: #fff; }
  .btn-cizgi:hover  { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn-cizgi-acik:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #fff; }
  .btn-whatsapp:hover { background: #179244; color: #fff; }
  /* buton üzerinde ışık kayması */
  .btn-brand::after, .btn-ink::after {
    content: ''; position: absolute; inset: 0; translate: -120% 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transition: translate 850ms var(--gecis);
  }
  .btn-brand:hover::after, .btn-ink:hover::after { translate: 120% 0; }
}

/* ===========================================================================
   YÜZEYLER — düz/gölgesiz kart YASAK
   =========================================================================== */
.kart {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  transition: box-shadow var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.kart-ink {
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  color: #c3c6dd;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), var(--golge-lifted);
}
.kart-ink h3, .kart-ink h4 { color: #fff; }

@media (hover: hover) and (pointer: fine) {
  a.kart:hover, .kart-etkilesimli:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--golge-lifted);
  }
}

/* Görsel kuyusu — içbükey his */
.gorsel-kuyu {
  background: var(--mist-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(18,17,42,.10), inset 0 0 0 1px var(--line);
}
.gorsel-kuyu img { width: 100%; height: 100%; object-fit: cover; }

/* Kesik çizgili teknik özellik satırı */
.ozellik-satir {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line-strong);
}
.ozellik-satir:last-child { border-bottom: 0; }
.ozellik-satir dt { color: var(--steel); font-size: var(--t-kucuk); flex: none; }
.ozellik-satir .nokta { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); translate: 0 -.25em; }
.ozellik-satir dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--ink);
  font-family: var(--yazi-mono); font-variant-numeric: tabular-nums; font-size: var(--t-kucuk);
}

/* Rozet (GDO İçermez vb.) */
.rozet {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--surface); color: var(--ink);
  font-size: var(--t-mini); font-weight: 600;
  padding: .6rem .95rem; border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
}
.rozet svg { width: 1.05rem; height: 1.05rem; color: var(--brand); flex: none; }
.bant-ink .rozet, .bant-ink-2 .rozet {
  background: rgba(255,255,255,.06); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Etiket — fotoğraf üstü kırmızı blok */
.etiket {
  display: inline-block; background: var(--brand); color: #fff;
  font-family: var(--yazi-mono); font-size: var(--t-mini); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .45rem .8rem; border-radius: var(--r-xs);
}

/* ===========================================================================
   FORM
   =========================================================================== */
.alan { margin-bottom: 1.15rem; }
.alan label { display: block; font-size: var(--t-kucuk); font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
.alan label .ger { color: var(--brand); }
.alan input, .alan textarea, .alan select {
  width: 100%; font-family: inherit; font-size: var(--t-govde); color: var(--ink-metin);
  background: var(--surface); border: 0; border-radius: var(--r-sm);
  padding: .85rem 1rem;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--sure) var(--gecis);
}
.alan textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: 0; box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px var(--brand-wash);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--steel-light); }
.alan .ipucu { font-size: var(--t-mini); color: var(--steel); margin-top: .4rem; }
.alan.hatali input, .alan.hatali textarea { box-shadow: inset 0 0 0 2px var(--brand); }
.alan .hata-metin { font-size: var(--t-mini); color: var(--brand); margin-top: .35rem; font-weight: 600; }
.bal { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.onay {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: var(--t-mini); color: var(--steel); margin-bottom: 1.35rem;
}
.onay input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--brand); }

.bildirim {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  padding: 1rem 1.2rem; border-radius: var(--r-md); margin-bottom: 1.5rem; font-size: var(--t-kucuk);
}
.bildirim svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .1rem; }
.bildirim-basari { background: #eaf7f1; color: #115e41; box-shadow: inset 0 0 0 1px #b6e0cc; }
.bildirim-hata   { background: var(--brand-wash); color: #8a0f1d; box-shadow: inset 0 0 0 1px #f4c3c8; }

.iletisim-oge { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.15rem 0; }
.iletisim-oge + .iletisim-oge { border-top: 1px solid var(--line); }
.iletisim-ikon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--brand-wash); color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 15%, transparent);
}
.iletisim-ikon svg { width: 19px; height: 19px; }
.iletisim-oge dt { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .1em;
                   color: var(--steel-light); font-weight: 600; margin-bottom: .2rem; }
.iletisim-oge dd { margin: 0; font-weight: 550; color: var(--ink); }
.iletisim-oge dd a { text-decoration: none; }

.harita { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--golge-lifted); }
.harita iframe { display: block; width: 100%; height: 440px; border: 0; filter: grayscale(.3) contrast(1.05); }

/* ===========================================================================
   HAREKET — yalnız transform/opacity
   =========================================================================== */
[data-belir] { opacity: 0; transform: translateY(18px); }
[data-belir].belirdi {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--gecis), transform 560ms var(--gecis);
  transition-delay: var(--gecikme, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-belir] { opacity: 1; transform: none; }
}