/*
 * presentation.css — Theme Presentation V2 paylaşılan LAYOUT primitifleri.
 *
 * CASCADE SÖZLEŞMESİ (yalnız V2 temalar):
 *   Yükleme sırası: modules.css → presentation.css → tema skin.
 *   + YAPISAL kurallar (display/grid/columns/aspect-ratio/align) ≥2-class
 *     specificity ile yazılır → hem modules'ı (1 class) hem tema skin base'ini
 *     (1 class) EZER, yükleme sırasından bağımsız. Tema, layout'u yine EZEBİLİR
 *     ama aynı `--layout-` modifier'ını (≥2 specificity) hedefleyerek yapar.
 *   + Genel width/surface/spacing 1-specificity'dir → tema skin bunları
 *     bilerek ezebilir (skin'in "son söz" hakkı).
 *
 * Bu işaretler yalnız manifest'i olan (V2) temalarda üretilir → V1'e SIFIR etki.
 */

/* ── Ortak: genişlik / yüzey / boşluk (skin ezebilir) ───────────────────────── */
[data-hs-width="wide"] > .container { width: min(100% - 2.5rem, 1360px); }
[data-hs-width="full"] > .container { width: 100%; max-width: none; }

[data-hs-space="compact"]:not(.block-hero) { padding-block: clamp(2.5rem, 5vw, 4rem); }
[data-hs-space="normal"]:not(.block-hero) { padding-block: clamp(3.5rem, 7vw, 6rem); }
[data-hs-space="roomy"]:not(.block-hero) { padding-block: clamp(5rem, 10vw, 8.5rem); }

/* Surface — bg + fg BİRLİKTE ve 2-class (skin base background'ı ezer → desenkron
 * olmaz). Metin rengi için SEMANTİK TOKEN override kullanılır: skin descendant'ları
 * var(--ink/--ink-soft/--line) okuduğundan, bu token'ları blok kökünde çevirince
 * tüm iç metin specificity savaşı olmadan kontrast'a uyar. Açık zemin+beyaz metin
 * veya koyu zemin+koyu metin kombinasyonu ASLA oluşmaz. */
.block-hero[data-hs-surface="muted"], .block-services[data-hs-surface="muted"], .block-gallery[data-hs-surface="muted"], .block-about[data-hs-surface="muted"], .block-pricing[data-hs-surface="muted"], .block-contact[data-hs-surface="muted"], .block-testimonials[data-hs-surface="muted"] {
  /* Longhand: `background` kısayolu, hero'ya inline verilen background-image ile
     birlikte background-position/size'ı da initial'a döndürüp focal point'i
     (`block-hero--focal-*`) sessizce iptal ediyordu. */
  background-color: var(--canvas-deep, color-mix(in srgb, currentColor 6%, transparent));
}
.block-hero[data-hs-surface="contrast"], .block-services[data-hs-surface="contrast"], .block-gallery[data-hs-surface="contrast"], .block-about[data-hs-surface="contrast"], .block-pricing[data-hs-surface="contrast"], .block-contact[data-hs-surface="contrast"], .block-testimonials[data-hs-surface="contrast"] {
  --ink: #ffffff;
  --ink-soft: var(--on-secondary, #f5f2ec);
  --accent-text: var(--secondary-ink-on-dark, #f5f2ec); /* küçük aksan koyu zeminde açık */
  --line: rgba(255, 255, 255, 0.20);
  --surface: color-mix(in srgb, var(--secondary, #1c1917) 82%, #ffffff);
  --canvas: var(--secondary, #1c1917);
  --canvas-deep: color-mix(in srgb, var(--secondary, #1c1917) 86%, #000000);
  background-color: var(--secondary, #1c1917);
  color: #f5f2ec;
}
.block-hero[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-services[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-gallery[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-about[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-pricing[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-contact[data-hs-surface="contrast"] :is(h1,h2,h3,h4), .block-testimonials[data-hs-surface="contrast"] :is(h1,h2,h3,h4) { color: #ffffff; }
.block-hero[data-hs-surface="contrast"] p, .block-services[data-hs-surface="contrast"] p, .block-gallery[data-hs-surface="contrast"] p, .block-about[data-hs-surface="contrast"] p, .block-pricing[data-hs-surface="contrast"] p, .block-contact[data-hs-surface="contrast"] p, .block-testimonials[data-hs-surface="contrast"] p { color: var(--on-secondary, #f5f2ec); }

/* ── HERO ────────────────────────────────────────────────────────────────────
 * split: gerçek block-hero__media > img. 2 sütun YALNIZ görselli split'te
 * (has-media). Görselsiz split tek sütun kalır (boş kolon üretmez). */
.block-hero__media { position: relative; overflow: hidden; }
.block-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Görselli split — masaüstü 2 sütun (2-class → modules flex'i ve skin'i ezer) */
.block-hero--layout-split.block-hero--has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(460px, 62vh, 680px);
}
/* Split'te tam-kaplama overlay'i KAPAT (3-specificity → modules ::before'u ezer;
 * repurpose değil, kapatma). Metin ayrı yüzeyde, görselin üstünde değil. */
.block-hero--layout-split.block-hero--has-media::before { display: none; }
.block-hero--layout-split.block-hero--has-media .block-hero__media { grid-column: 1; min-height: 100%; }
.block-hero--layout-split.block-hero--has-media > .container {
  grid-column: 2;
  width: 100%;
  max-width: 620px;
  margin-inline: 0;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}
.block-hero--layout-split.block-hero--has-media .block-hero__content { max-width: 34rem; padding-block: 0; }
@media (max-width: 860px) {
  .block-hero--layout-split.block-hero--has-media {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .block-hero--layout-split.block-hero--has-media .block-hero__media {
    grid-column: 1;
    min-width: 0;
    min-height: 0;
    /* `width: 100%` ŞART. aspect-ratio + max-height birlikte, oranı max-height
     * üzerinden bir GENİŞLİĞE aktarır (42vh·16/10). Genişlik belirsiz kalırsa
     * ızgara öğesi bu aktarılan genişliğe SABİTLENİR ve tek sütunlu satırda
     * sağda ölü alan bırakır: 430px'te ~14px şerit, 768px ve %200 reflow'da
     * "küçük görsel + boş kolon". Genişlik kesinleşince oran yalnız yüksekliği
     * belirler, max-height onu sınırlar ve medya her genişlikte sütunu doldurur. */
    width: 100%;
    max-width: 100%;
    max-height: min(42vh, 280px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }
  .block-hero--layout-split.block-hero--has-media .block-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .block-hero--layout-split.block-hero--has-media > .container {
    grid-column: 1;
    max-width: none;
    width: 100%;
    min-width: 0;
    /* Yatay gutter SIFIR OLAMAZ. Bu kural `.container`ın kendi kenar boşluğunu
     * (width: min(100% - Xpx, …)) zaten eziyor; yatay padding de 0 olursa H1,
     * alt başlık ve CTA ekran kenarına yapışır ve hero "bitmemiş" görünür.
     * Medya full-bleed kalır; YALNIZ metin container'ı içeri alınır.
     * clamp değeri bölüm ritmiyle hizalı: 320-390px'te 20px (wide container
     * inset'iyle aynı), 430px'te 21.5px, ≥640px'te 32px. */
    padding: clamp(1rem, 4vw, 1.75rem) clamp(1.25rem, 5vw, 2rem);
  }
  .block-hero--layout-split.block-hero--has-media .block-hero__content {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .block-hero--layout-split .block-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    width: 100%;
  }
  .block-hero--layout-split .block-hero__actions .btn,
  .block-hero--layout-split .block-hero__cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}
@media (max-width: 400px) {
  .block-hero--layout-split.block-hero--has-media .block-hero__media {
    max-height: min(34vh, 200px);
  }
  .block-hero--layout-split.block-hero--has-media .block-hero__title {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
    line-height: 1.12;
  }
  .block-hero--layout-split.block-hero--has-media .block-hero__subtitle {
    font-size: 0.95rem;
    line-height: 1.45;
  }
}

/* poster — GERÇEK block-hero__media > img ARKADA, overlay üstünde, içerik ortalı.
 * Katman: media(0) < overlay ::before(1) < içerik(2). 2-class → skin base ezilir. */
.block-hero.block-hero--layout-poster.block-hero--has-media {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(560px, 84vh, 820px);
}
.block-hero--layout-poster.block-hero--has-media .block-hero__media { position: absolute; inset: 0; z-index: 0; }
.block-hero--layout-poster.block-hero--has-media::before { z-index: 1; }
.block-hero--layout-poster.block-hero--has-media > .container { position: relative; z-index: 2; }
.block-hero--layout-poster.block-hero--has-media .block-hero__content { max-width: 46rem; }
/* poster no-media → 820px BOŞLUK üretme; içerik yüksekliğine düş (açık fallback). */
.block-hero.block-hero--layout-poster:not(.block-hero--has-media) { min-height: 0; }
.block-hero.block-hero--layout-poster:not(.block-hero--has-media) .block-hero__content {
  max-width: 46rem; margin-inline: auto; text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* minimal — görselsiz, sade. min-height:0 skin base'i (74vh) EZMELİ. */
.block-hero.block-hero--layout-minimal { min-height: 0; }
.block-hero.block-hero--layout-minimal .block-hero__content { max-width: 40rem; padding-block: clamp(3rem, 7vw, 6rem); }

/* ── SERVICES ────────────────────────────────────────────────────────────────
 * editorial: kart-grid DEĞİL; dönüşümlü (zig-zag) satır. Görselsiz item tek
 * sütuna düşer (:has fallback). Tümü ≥2-class → skin kart stilini ezer. */
.block-services--layout-editorial .block-services__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
.block-services--layout-editorial .block-services__card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.block-services--layout-editorial .block-services__card:nth-child(even) { direction: rtl; }
.block-services--layout-editorial .block-services__card:nth-child(even) > * { direction: ltr; }
/* Görselsiz item → tek sütun (boş kolon üretme) */
.block-services--layout-editorial .block-services__card:not(:has(.block-services__card-image)) { grid-template-columns: 1fr; }
.block-services--layout-editorial .block-services__card-image { aspect-ratio: 4 / 3; border-radius: var(--radius, 16px); overflow: hidden; margin: 0; }
.block-services--layout-editorial .block-services__card-image img { width: 100%; height: 100%; object-fit: cover; }
.block-services--layout-editorial .block-services__card-body { padding: 0; }
@media (max-width: 720px) {
  .block-services--layout-editorial .block-services__card,
  .block-services--layout-editorial .block-services__card:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

.block-services--layout-list .block-services__grid { grid-template-columns: 1fr; gap: 0; }
.block-services--layout-list .block-services__card { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; border: 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 0; box-shadow: none; background: transparent; padding: 1.5rem 0; overflow: visible; }
/* Görselsiz item → tek sütun. `auto 1fr` görselin ilk sütunda olduğunu varsayar;
   görsel yokken gövde `auto` sütuna düşüp içeriğine göre daralıyor ve yanında
   kullanılmayan bir 1fr sütun kalıyordu (ölçülen gövde 146–192px). `editorial`
   yerleşimi bu korumaya zaten sahipti. */
.block-services--layout-list .block-services__card:not(:has(.block-services__card-image)) { grid-template-columns: 1fr; }
.block-services--layout-list .block-services__card-image { width: 84px; height: 84px; aspect-ratio: 1; border-radius: 999px; overflow: hidden; margin: 0; }
.block-services--layout-list .block-services__card-image img { width: 100%; height: 100%; object-fit: cover; }

.block-services--layout-rail .block-services__grid { grid-auto-flow: column; grid-auto-columns: min(78%, 340px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.block-services--layout-rail .block-services__card { scroll-snap-align: start; }

/* ── GALLERY ─────────────────────────────────────────────────────────────────
 * mosaic: sabit satır geometrisi. aspect-ratio SIFIRLANIR (2-class → skin'in
 * aspect-ratio:1'ini ezer) yoksa row-span'le çakışıp taşar. */
.block-gallery--layout-mosaic .block-gallery__grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 13vw, 190px);
  gap: 0.75rem;
}
.block-gallery--layout-mosaic .block-gallery__item {
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: var(--radius-sm, 12px);
  min-height: 0;
}
.block-gallery--layout-mosaic .block-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.block-gallery--layout-mosaic .block-gallery__item:nth-child(6n + 4) { grid-row: span 2; }
.block-gallery--layout-mosaic .block-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .block-gallery--layout-mosaic .block-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 34vw, 200px); }
  .block-gallery--layout-mosaic .block-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 1; }
  .block-gallery--layout-mosaic .block-gallery__item:nth-child(6n + 4) { grid-row: span 1; }
}

.block-gallery--layout-filmstrip .block-gallery__grid { grid-auto-flow: column; grid-auto-columns: min(70%, 420px); grid-template-columns: none; grid-auto-rows: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; }
.block-gallery--layout-filmstrip .block-gallery__item { aspect-ratio: 3 / 2; scroll-snap-align: center; }
/* TEK GÖRSELLİ filmstrip bir "ray" DEĞİLDİR. Blog yazısı kapağı, üretici
 * tarafından tek görsellik bir gallery bloğu olarak basılır (HTMLGenerator
 * generateBlog); filmstrip varsayılanını devralınca kapak, kaydırma rayının
 * ilk karesi gibi min(70%, 420px) genişliğe düşer ve sağında ölü alan bırakır
 * (390px'te 245px görsel + 125px boşluk). `:only-child` koşulu bu kuralı
 * YALNIZ tek öğeli galerilere bağlar; gerçek çok görselli filmstrip'e dokunmaz.
 * Mobil/tablet bandıyla sınırlıdır; masaüstü kompozisyonu değişmez. */
@media (max-width: 860px) {
  .block-gallery--layout-filmstrip .block-gallery__grid:has(> .block-gallery__item:only-child) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .block-gallery--layout-filmstrip .block-gallery__item:only-child { scroll-snap-align: none; }
}

/* ── ABOUT ───────────────────────────────────────────────────────────────────
 * V2 section layout, block-level image-left/right'ı YAPISAL olarak ezer
 * (2-class → __inner ve __inner--image-* flex'ini ezer). */
.block-about--layout-editorial .block-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}
/* image-left → görsel 1. sütun; image-right → görsel 2. sütun (gerçek farklı x). */
.block-about--layout-editorial .block-about__inner--image-right { direction: rtl; }
.block-about--layout-editorial .block-about__inner--image-right > * { direction: ltr; }
.block-about--layout-editorial .block-about__image { aspect-ratio: 4 / 5; border-radius: var(--radius-lg, 24px); overflow: hidden; }
.block-about--layout-editorial .block-about__text { padding-bottom: clamp(1rem, 4vw, 3rem); }
.block-about--layout-editorial .block-about__inner:not(:has(.block-about__image)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
  margin-inline: auto;
}
.block-about--layout-editorial .block-about__inner:not(:has(.block-about__image)) .block-about__text { padding-bottom: 0; }
@media (max-width: 760px) {
  .block-about--layout-editorial .block-about__inner,
  .block-about--layout-editorial .block-about__inner--image-right { grid-template-columns: 1fr; direction: ltr; }
}

.block-about--layout-full .block-about__inner { display: block; max-width: 46rem; margin-inline: auto; text-align: center; }
.block-about--layout-full .block-about__image { display: none; }

/* ── PRICING ─────────────────────────────────────────────────────────────────*/
.block-pricing--layout-list .block-pricing__grid { grid-template-columns: 1fr; max-width: 780px; gap: 0; }
.block-pricing--layout-list .block-pricing__plan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; border: 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 0; background: transparent; box-shadow: none; padding: 1.5rem 0; }
.block-pricing--layout-list .block-pricing__features { grid-column: 1 / -1; margin-top: 0.5rem; }
.block-pricing--layout-list .block-pricing__plan--featured { transform: none; }

.block-pricing--layout-comparison .block-pricing__grid { border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: var(--radius, 16px); overflow: hidden; gap: 0; }
.block-pricing--layout-comparison .block-pricing__plan { border-radius: 0; border-right: 1px solid var(--line, rgba(0,0,0,.12)); }

/* ── CONTACT ─────────────────────────────────────────────────────────────────*/
.block-contact--layout-split .block-contact__inner:not(:has(.block-contact__info > .block-contact__item)),
.block-contact--layout-split .block-contact__inner:not(:has(.block-contact__form)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
}
.block-contact--layout-split .block-contact__info:not(:has(.block-contact__item)) { display: none; }
.block-contact--layout-stack .block-contact__inner { grid-template-columns: 1fr; max-width: 620px; }
.block-contact--layout-card .block-contact__inner { background: var(--surface, #fff); border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: var(--radius-lg, 24px); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.08)); }

/* ── TESTIMONIALS ────────────────────────────────────────────────────────────*/
.block-testimonials--layout-feature .block-testimonials__grid { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; gap: 1.25rem; }
.block-testimonials--layout-feature .block-testimonials__item:first-child { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); }
.block-testimonials--layout-feature .block-testimonials__item:first-child .block-testimonials__text { font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.5; }

.block-testimonials--layout-rail .block-testimonials__grid { grid-auto-flow: column; grid-auto-columns: min(80%, 380px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.block-testimonials--layout-rail .block-testimonials__item { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  [class*="--layout-rail"] .block-services__grid,
  [class*="--layout-rail"] .block-testimonials__grid,
  .block-gallery--layout-filmstrip .block-gallery__grid { scroll-behavior: auto; }
}