/* Kapak. Bütün sınıflar kp- önekli, başka dosyaya bağımlılık yok.
   Tokenlar (--gece, --kagit, --kirmizi-koyu, --kirmizi-basili, --lacivert, --kenar, --kap, --aci) sayfanın :root'undan gelir;
   değer yoksa aşağıdaki yedekler kullanılır. Fontlar: Literata, Sofia Sans (sayfada yüklü olmalı).
   Yol notu: görsel yolları bu dosyaya göredir (../img/...). */

.kp-ust, .kp-kapak {
  --kp-gece: var(--gece, #141B55);
  --kp-krem: var(--kagit, #F7F3EB);
  --kp-kirmizi: var(--kirmizi-koyu, #D7261B);
  --kp-kirmizi-basili: var(--kirmizi-basili, #B81F15);
  --kp-aci: var(--aci, 126.8deg);
  --kp-serif: var(--serif, "Literata", "Iowan Old Style", Georgia, serif);
  --kp-sans: var(--sans, "Sofia Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
  --kp-kenar: var(--kenar, clamp(20px, 4vw, 56px));
  --kp-kap: var(--kap, 1360px);
}

/* ---------- Düğmeler ---------- */
.kp-gizli { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kp-dugme {
  display: inline-flex; align-items: center; gap: 11px; min-height: 48px; padding: 13px 22px;
  border: 1.5px solid transparent; border-radius: 2px;
  font: 700 1rem/1.2 var(--kp-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.kp-dugme:hover { text-decoration: none; }
.kp-birincil {
  background: var(--kp-kirmizi); border-color: var(--kp-kirmizi); color: var(--kp-krem);
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.kp-birincil .kp-centik { width: 7px; height: 13.2px; fill: currentColor; transition: transform 160ms ease-out; }
.kp-birincil:hover { background-color: var(--kp-kirmizi-basili); border-color: var(--kp-kirmizi-basili); }
.kp-birincil:hover .kp-centik { transform: translateX(3px); }
.kp-ikincil {
  --kp-dolgu: var(--kp-krem);
  color: var(--kp-krem); border-color: var(--kp-krem);
  background: linear-gradient(var(--kp-aci), var(--kp-dolgu) 50%, transparent 50%) 100% 0 / 260% 100% no-repeat;
  transition: background-position 220ms ease-out, color 220ms ease-out;
}
.kp-ikincil:hover, .kp-ikincil:focus-visible { background-position: 0 0; color: var(--kp-gece); }
.kp-dis { display: inline-block; width: .62em; height: .62em; margin-left: .3em; overflow: visible; vertical-align: .02em; }
.kp-metin-dugme {
  padding: 0; border: 0; background: none; cursor: pointer; font: 600 .9375rem/1 var(--kp-sans); color: var(--kp-krem);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; min-height: 44px;
}
.kp-metin-dugme:hover { text-decoration-thickness: 2px; }
.kp-ust :focus-visible, .kp-kapak :focus-visible { outline: 2px solid var(--kp-krem); outline-offset: 3px; }

/* ---------- Üst bilgi: ebru üstünde; kaydırınca ince yapışık çubuk (ebru şerit zemini) ---------- */
.kp-ust {
  position: fixed; inset: 0 0 auto; z-index: 60; color: var(--kp-krem);
  background: transparent; --kp-logo-y: 46px; --kp-ust-pad: 14px;
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}
.kp-ust-ic {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: calc(var(--kp-kap) + 2 * var(--kp-kenar)); margin-inline: auto;
  padding: var(--kp-ust-pad) var(--kp-kenar);
}
.kp-ust-logo { display: block; flex: 0 1 auto; min-width: 0; line-height: 0; }
.kp-ust-logo img { display: block; width: auto; max-width: 100%; height: var(--kp-logo-y); object-fit: contain; object-position: left center; }
/* Çok dar telefonda (≤ 360 px) logo küçülür, Menü düğmesi her zaman sığar. */
@media (max-width: 360px) { .kp-ust { --kp-logo-y: 38px; } .kp-ust-ic { gap: 14px; } }
.kp-menu { display: none; align-items: center; gap: 26px; }
.kp-menu ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.kp-menu ul a { display: block; padding: 14px 0; font: 600 .9375rem/1 var(--kp-sans); color: inherit; text-decoration: none; white-space: nowrap; }
@media (min-width: 1440px) { .kp-menu { gap: 34px; } .kp-menu ul { gap: 26px; } .kp-menu ul a { font-size: 1rem; } }
.kp-menu ul a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.kp-menu-dugme {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid currentColor; border-radius: 2px; background: none; color: inherit;
  font: 700 1rem/1 var(--kp-sans); cursor: pointer;
}
@media (min-width: 1280px) {
  .kp-ust { --kp-logo-y: 64px; --kp-ust-pad: 18px; }
  .kp-menu { display: flex; }
  .kp-menu-dugme { display: none; }
}
/* yapışık çubuk: ince, zemini ebru şerit görseli */
.kp-ust.kp-yapisik {
  --kp-logo-y: 32px; --kp-ust-pad: 10px;
  background: var(--kp-gece) url(../img/ebru-serit.webp) 50% 50% / cover no-repeat;
  box-shadow: 0 1px 0 rgba(247, 243, 235, .16);
}
@media (min-width: 1280px) { .kp-ust.kp-yapisik { --kp-logo-y: 34px; --kp-ust-pad: 11px; } }
.kp-ust.kp-yapisik .kp-menu ul a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: .9375rem; }
.kp-ust.kp-yapisik .kp-dugme { min-height: 44px; padding-block: 9px; }
.kp-menu-dugme { min-height: 44px; }

/* ---------- Kapak ----------
   Onaylı düzen: solda başkanın beyaz fonlu kare fotoğrafı ve yanında dört satır
   başlık, altında tanıtım ve iki düğme; sağda büyük ebru kalbi (motorun kendi yerleşimi, metin bloklarından
   kaçar); sağ altta küçük Kalbimiz Kâğıthane logosu kendi kalbiyle. Ebru canlı palette. */
.kp-kapak {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; min-height: max(100svh, 640px);
  background-color: var(--kp-gece); color: var(--kp-krem);
  --kp-h1: clamp(2.1rem, 1rem + 3.3vw, 4rem);
}
.kp-tuval { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; touch-action: pan-y pinch-zoom; }

/* Boş alana dokunma tuvale ulaşsın (suya damla): kapsayıcılar geçirgen, yazı ve düğmeler değil */
.kp-ic, .kp-metin, .kp-dugmeler, .kp-kalbimiz-kutu { pointer-events: none; }
.kp-baslik, .kp-giris, .kp-dugmeler > * { pointer-events: auto; }

.kp-ic {
  width: 100%; max-width: calc(var(--kp-kap) + 2 * var(--kp-kenar)); margin-inline: auto;
  padding: 108px var(--kp-kenar) 40px;
  display: flex; flex-direction: column; gap: 32px;
}

.kp-metin { margin-top: auto; width: fit-content; max-width: 100%; }
/* Dekupe başkan: zemin yok, doğrudan ebrunun üstünde, alt kısmı ebruya karışır (geçiş
   görselin alfa kanalında). Masaüstünde başlığın solunda; başı başlığın üstüne taşar, alt kenarı son satıra iner.
   Telefonda başlığın üstünde. */
.kp-baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; font-size: var(--kp-h1); }
.kp-foto { flex: none; position: relative; width: min(40vw, 160px); margin: 0; }
.kp-foto img { display: block; width: 100%; height: auto; }
.kp-h1 {
  margin: 0; font: 560 1em/1.02 var(--kp-serif); font-variation-settings: "opsz" 72;
  letter-spacing: -.018em; color: var(--kp-krem);
}
.kp-satir { display: block; white-space: nowrap; }
.kp-giris { margin: 26px 0 0; max-width: 33em; font: 400 clamp(1.0625rem, .95rem + .3vw, 1.25rem)/1.55 var(--kp-sans); text-wrap: pretty; }
.kp-giris strong { font-weight: 700; }
.kp-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* Telefonda büyük kalp fotoğrafın sağındaki boşluğa kurulur (motor bu kutuyu okur); daha geniş ekranda motorun kendi
   yerleşimi (sağda büyük kalp) */
.kp-metin { position: relative; }
.kp-kalp-yer { position: absolute; top: 0; left: calc(min(40vw, 160px) + 12px); right: 0; height: calc(min(40vw, 160px) * 794 / 640); pointer-events: none; }
.kp-baslik, .kp-giris, .kp-dugmeler { position: relative; z-index: 1; }
@media (min-width: 640px) { .kp-kalp-yer { display: none; } }
.kp-kalbimiz-kutu { align-self: flex-start; width: min(56vw, 220px); }
.kp-kalbimiz { display: block; width: 100%; height: auto; overflow: visible; }
.kp-harfler { fill: #fff; }
.kp-kalp-yol { fill: #e1251b; }

@media (min-width: 640px) {
  .kp-baslik { flex-direction: row; gap: clamp(16px, 1.6vw, 28px); }
  /* Örnekteki ölçü (1440 px'te): kutu 3,98em (başlık eski yerinde), dekupe 3,68em (~234 px) sola yaslı; başı başlığın
     ilk satırının ~.74em üstünden başlar, alt kenarı son satırın .24em üstünde ebruya karışır */
  .kp-foto { width: 3.98em; align-self: stretch; }
  .kp-foto img { position: absolute; left: 0; bottom: .24em; width: 3.68em; }
}
@media (min-width: 960px) {
  /* Başkanın fotoğrafı 4,7em: metin bloğu altta,
     kapak tam ekran yerine ekranın %85'i (en az 640 px; içerik sığmazsa uzar), alt kenarda sonraki
     bölüm görünür. Fotoğrafın başlığın üstüne taşan kısmı (~2em) blokta yer tutar, üst çubuğa yaklaşmaz.
     Kalbimiz Kâğıthane logosu sağ altta sabit. */
  .kp-kapak { min-height: max(85svh, 640px); }
  .kp-ic {
    position: relative; gap: 0; padding-top: calc(var(--ust-y) + 40px); padding-bottom: clamp(36px, 5vh, 56px);
    min-height: max(85svh, 640px);
  }
  .kp-ic::before { content: ""; flex: 1 1 0; }
  .kp-metin { margin-top: 0; }
  .kp-baslik { padding-top: 2em; }
  .kp-foto { width: 5em; }
  .kp-foto img { width: 4.7em; }
  .kp-kalbimiz-kutu { position: absolute; right: var(--kp-kenar); bottom: clamp(36px, 5vh, 56px); width: clamp(180px, 15vw, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .kp-ust, .kp-birincil, .kp-ikincil, .kp-birincil .kp-centik { transition: none; }
}

/* ---------- Siteye yerleşim ---------- */
.js .kp-yazi-ebruda .kp-harfler { opacity: 0; transition: none; }

/* Üst bilgi yüksekliği: alt sayfalarda .sayfa-basligi ve sabit konumlar bunu okur (styles.css'teki :root değerinin yerine) */
:root { --ust-y: 74px; }
@media (min-width: 1280px) { :root { --ust-y: 100px; } }
/* Sayfa başında ebru bandı yoksa (JS yoksa ya da bant kurulmadıysa) üst bilgi düz gece zeminde durur */
.kp-ust.kp-duz:not(.kp-yapisik) { background-color: var(--kp-gece); }
.kp-menu-dugme.kp-menu-bag { text-decoration: none; }
.js .kp-menu-bag { display: none; }
html:not(.js) .kp-menu-dugme:not(.kp-menu-bag) { display: none; }
@media (min-width: 1280px) { .kp-menu-dugme, .js .kp-menu-bag { display: none; } }

/* Etkin sayfa: kalıcı alt çizgi + önünde kırmızı çentik (logodaki çentikle aynı kesim, 53,2°) */
.kp-menu ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.kp-menu ul a[aria-current="page"]::before {
  content: ""; display: inline-block; width: 7px; height: 13px; margin-right: 8px; vertical-align: -1px;
  background: #EE3124; clip-path: polygon(0 0, 100% 0, 100% 29%, 0 100%);
}
.kp-ust.kp-yapisik .kp-menu ul a[aria-current="page"]::before { vertical-align: 0; }