/*
 * default v2 — görsel kimlik (keskin + kurumsal).
 *
 * Yapısal iskelet (ob-* sınıf sözlüğü, grid, aside modeli) engine.css'ten
 * gelir ve engine::head onu bu dosyadan ÖNCE yükler; buradaki her kural
 * motorun üstüne aynı özgüllükle giydirir. Token VARSAYILANLARI burada
 * tekrarlanmaz — panel/manifest değerlerini :root'a sistem basar
 * (engine::head style enjeksiyonu); bu dosya yalnız --ob-* önekli YARDIMCI
 * türevler tanımlar.
 *
 * Bağlayıcı brief (M2 spec, 7 kural — DefaultThemeV2AssetsTest pinler):
 *   1 Köşe yalnız var(--radius) türevi (0.125rem bandı) — pill/oval yok.
 *   2 Ayrım DAİMA hairline (--ob-line); gölge tek zayıf değer (--ob-shadow),
 *     yalnız yükseltilmiş katman (drawer) kullanır.
 *   3 Başlıklar --font-display + clamp() skalası; gövde 68ch; mikro-etiket
 *     (.ob-label) büyük harf + letter-spacing .08em.
 *   4 Yüksek kontrast mürekkep + TEK vurgu (--ob-accent); durum renkleri
 *     yalnız engine ui.notice katmanında.
 *   5 Kartlar veri-önde; hover = hairline vurgusu + ok kayması —
 *     transform-oyunu (scale/lift) yok.
 *   6 Hareket 150-200ms, yalnız opacity/transform; prefers-reduced-motion
 *     saygısı.
 *   7 Dikey ritim yalnız --ob-space-* skalası; bölüm ayrımı zemin-yüzey
 *     alternasyonuyla (.ob-section--alt).
 *
 * Bölümler: Token türevleri / Tipografi / Kabuk (header-footer) /
 * Section'lar (Task 4) / Kartlar (Task 5) / Kompozisyon uyum katmanı /
 * Hareket + reduced-motion.
 */

/* --- Token türevleri (yalnız --ob-* yardımcılar; panel token'ı YOK) --- */
:root {
  /* Kural 7: dikey ritim skalası — tüm boşluklar buradan. */
  --ob-space-1: 0.25rem;
  --ob-space-2: 0.5rem;
  --ob-space-3: 0.75rem;
  --ob-space-4: 1rem;
  --ob-space-5: 1.5rem;
  --ob-space-6: 2.5rem;
  --ob-space-7: clamp(3rem, 6vw, 5.5rem);

  /* Kural 2: tek zayıf gölge — yalnız yükseltilmiş katman. */
  --ob-shadow: 0 1px 2px rgb(15 18 25 / 6%);

  /* Kural 3: clamp'li display skalası. */
  --ob-text-xs: 0.75rem;
  --ob-text-sm: 0.875rem;
  --ob-text-lg: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --ob-text-xl: clamp(1.2rem, 0.7vw + 1.05rem, 1.55rem);
  --ob-text-2xl: clamp(1.45rem, 1.1vw + 1.15rem, 2rem);
  --ob-text-3xl: clamp(1.75rem, 2vw + 1.2rem, 2.6rem);
  --ob-text-4xl: clamp(2.1rem, 3vw + 1.25rem, 3.4rem);

  /* Motor ritim değişkeni skalaya bağlanır (engine.css tüketir). */
  --ob-section-y: var(--ob-space-7);
}

/* --- Tipografi (kural 3-4) --- */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: 0 var(--ob-space-3);
}

h1 { font-size: var(--ob-text-4xl); }
h2 { font-size: var(--ob-text-2xl); }
h3 { font-size: var(--ob-text-xl); }
h4 { font-size: var(--ob-text-lg); }

a { color: inherit; }
main a { text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }

/* Kural 3: mikro-etiket — büyük harf, geniş aralık, süssüz. */
.ob-label {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--ob-line);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--ob-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ob-muted);
}

/* Kural 3: gövde metni okunur satır uzunluğunda kalır. */
.ob-b-body { max-width: 68ch; font-size: var(--ob-text-lg); }
.ob-b-body p { margin-block: 0 var(--ob-space-4); }
.ob-b-body h2, .ob-b-body h3 { margin-top: var(--ob-space-6); }

/* Tek vurgu (kural 4): eylem rengi yalnız accent; butonlar keskin. */
.ob-btn {
  border: 1px solid var(--ob-accent);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--ob-text-sm);
}
.ob-btn:hover { filter: brightness(0.92); }
.ob-btn--ghost, .ob-btn--whatsapp {
  background: transparent;
  border-color: var(--ob-line);
  color: var(--ob-ink);
}
.ob-btn--ghost:hover, .ob-btn--whatsapp:hover { filter: none; border-color: var(--ob-ink); }

/* --- Kabuk: header (kural 2 — hairline ayrım, doku yok) --- */
.ob-header { background: var(--ob-bg); border-bottom: 1px solid var(--ob-line); }
.ob-header__bar { padding-block: var(--ob-space-3); }
.ob-header__brand {
  font-family: var(--font-display);
  font-size: var(--ob-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ob-header__nav { display: none; gap: var(--ob-space-5); }
.ob-header__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--ob-text-sm);
  font-weight: 500;
  color: var(--ob-muted);
  border-bottom: 1px solid transparent;
}
.ob-header__nav a:hover, .ob-header__nav a:focus-visible {
  color: var(--ob-ink);
  border-bottom-color: var(--ob-ink);
}
.ob-header__tools { display: flex; align-items: center; gap: var(--ob-space-2); }
.ob-header__lang { display: flex; gap: var(--ob-space-1); }
.ob-header__lang a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.4rem;
  font-size: var(--ob-text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ob-muted);
}
.ob-header__lang a[aria-current="true"] { color: var(--ob-ink); border-bottom: 1px solid var(--ob-ink); }

/* Mobil çekmece: yükseltilmiş TEK katman (gölge yalnız burada — kural 2). */
.ob-header__drawer {
  display: grid;
  gap: var(--ob-space-1);
  padding-block: var(--ob-space-3);
  border-top: 1px solid var(--ob-line);
  background: var(--ob-bg);
  box-shadow: var(--ob-shadow);
}
.ob-header__drawer a {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--ob-ink);
}
.ob-header__drawer[data-open="false"] { display: none; }
/* JS yoksa menü daima erişilir kalır (progressive enhancement). */
.no-js .ob-header__drawer[data-open="false"] { display: grid; }
.no-js [data-ob-nav-toggle] { display: none; }

@media (min-width: 64rem) {
  .ob-header__nav { display: flex; }
  .ob-header__drawer, [data-ob-nav-toggle] { display: none !important; }
}

/* --- Kabuk: footer (zemin-yüzey alternasyonunun kapanışı) --- */
.ob-footer { background: var(--ob-surface); border-top: 1px solid var(--ob-line); color: var(--ob-muted); }
.ob-footer__cols { padding-block: var(--ob-space-6); }
.ob-footer h2 { font-size: var(--ob-text-lg); color: var(--ob-ink); }
.ob-footer h3 {
  font-size: var(--ob-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ob-muted);
}
.ob-footer p { margin-block: 0 var(--ob-space-2); }
.ob-footer a { min-height: 44px; display: flex; align-items: center; }
.ob-footer a:hover, .ob-footer a:focus-visible { color: var(--ob-ink); }
.ob-footer__legal { font-size: var(--ob-text-sm); }

/* --- Section'lar (Task 4) --- */
/* Kural 7: bölüm ayrımı boşlukla değil zemin-yüzey alternasyonuyla. */
.ob-section { padding-block: var(--ob-space-7); }
.ob-section--alt { background: var(--ob-surface); }
.ob-section--tight { padding-block: var(--ob-space-6); }
/* Çağrı bandı: mürekkep zemin — durum rengi değil, paletin kendi ucu. */
.ob-section--dark { background: var(--ob-ink); color: var(--ob-bg); }
.ob-section--dark h2, .ob-section--dark .ob-lead { color: inherit; }
.ob-section--dark .ob-btn--ghost, .ob-section--dark .ob-btn--whatsapp { color: inherit; border-color: var(--ob-muted); }

/* Section başlığı: h2 + lead tek ritimde. */
.ob-sec-head { display: grid; gap: var(--ob-space-2); margin-bottom: var(--ob-space-6); }
.ob-sec-head h2 { margin: 0; }
.ob-lead { margin: 0; color: var(--ob-muted); font-size: var(--ob-text-lg); max-width: 68ch; }

/* Izgara: mobil tek sütun → kırılımlarla 2/3/4. */
.ob-grid { display: grid; gap: var(--ob-space-5); align-items: stretch; }
.ob-grid--center { align-items: center; }
@media (min-width: 48rem) {
  .ob-grid--2, .ob-grid--3, .ob-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .ob-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Medya çerçevesi: hairline + radius bandı; kırık kutu yok (blade @if korur). */
.ob-media { border: 1px solid var(--ob-line); border-radius: var(--radius); overflow: hidden; }
.ob-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-media--4-3 { aspect-ratio: 4 / 3; }
.ob-media--16-10 { aspect-ratio: 16 / 10; }

/* Eylem sırası (hero, bantlar). */
.ob-actions { display: flex; flex-wrap: wrap; gap: var(--ob-space-3); margin-block: var(--ob-space-5) 0; }

/* Hero: sol künye + sağ medya; başlık display skalasının tepesinde. */
.ob-hero__grid { display: grid; gap: var(--ob-space-6); align-items: center; }
@media (min-width: 64rem) { .ob-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ob-hero__title { font-size: var(--ob-text-4xl); margin-bottom: var(--ob-space-4); }

/* Güven şeridi: rakam üstte, mikro-etiket altta — hairline bant. */
.ob-strip { display: flex; flex-wrap: wrap; gap: var(--ob-space-6); margin: 0; padding-block: var(--ob-space-4); border-block: 1px solid var(--ob-line); }
.ob-strip__value { margin: 0; font-family: var(--font-display); font-size: var(--ob-text-2xl); font-weight: 700; line-height: 1.1; }
.ob-strip__label { margin: 0; color: var(--ob-muted); font-size: var(--ob-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* Chip: keskin köşeli, hairline çerçeveli küçük bağlantı. */
.ob-chips { display: flex; flex-wrap: wrap; gap: var(--ob-space-2); }
.ob-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0.2rem 0.75rem; border: 1px solid var(--ob-line); border-radius: var(--radius); background: var(--ob-elevate); color: var(--ob-ink); font-size: var(--ob-text-sm); text-decoration: none; }
a.ob-chip:hover, a.ob-chip:focus-visible { border-color: var(--ob-ink); }

/* Akordeon: hairline satır ayrımı, JS'siz <details>. */
.ob-accordion { border-top: 1px solid var(--ob-line); max-width: 68ch; }
.ob-accordion details { border-bottom: 1px solid var(--ob-line); }
.ob-accordion summary { cursor: pointer; padding-block: var(--ob-space-4); font-weight: 600; list-style-position: inside; }
.ob-accordion summary:hover { color: var(--ob-accent); }
.ob-accordion__body { padding-block: 0 var(--ob-space-4); color: var(--ob-muted); }

/* Zengin metin gövdesi (about, richtext): 68ch bandı. */
.ob-prose { max-width: 68ch; }
.ob-prose p { margin-block: 0 var(--ob-space-4); }

/* Basit dikey liste (belgeler). */
.ob-list-reset { list-style: none; margin: 0; padding: 0; }
.ob-stack { display: grid; gap: var(--ob-space-2); justify-items: start; }

/* Slider: CSS scroll-snap — JS yalnız ok/nokta ekler (app.js). */
.ob-slider { display: grid; gap: var(--ob-space-3); margin-top: var(--ob-space-6); }
.ob-slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 24rem); gap: var(--ob-space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--ob-space-2); }
.ob-slider__slide { scroll-snap-align: start; min-width: 0; }
.ob-slider__nav { display: flex; justify-content: flex-end; gap: var(--ob-space-2); }
.ob-slider__arrow { min-width: 44px; min-height: 44px; border: 1px solid var(--ob-line); border-radius: var(--radius); background: transparent; color: var(--ob-ink); font: inherit; cursor: pointer; }
.ob-slider__arrow:hover:not(:disabled), .ob-slider__arrow:focus-visible { border-color: var(--ob-ink); }
.ob-slider__arrow:disabled { opacity: 0.4; cursor: default; }
.ob-slider__dots { display: flex; gap: var(--ob-space-2); }
.ob-slider__dot { width: 0.6rem; height: 0.6rem; padding: 0; border: 1px solid var(--ob-line); border-radius: var(--radius); background: transparent; cursor: pointer; }
.ob-slider__dot[aria-current="true"] { background: var(--ob-ink); border-color: var(--ob-ink); }

/* Kart içi ek dil: tarih mikro-etiketi + iç boşluk değiştiricileri. */
.ob-card--pad { padding: var(--ob-space-5); }
.ob-card--center { align-items: center; justify-content: center; text-align: center; }
.ob-card__pad { padding: var(--ob-space-4) var(--ob-space-5) var(--ob-space-5); display: grid; gap: var(--ob-space-2); }
.ob-card__date { color: var(--ob-muted); font-size: var(--ob-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.ob-card__cta { margin: 0; }
.ob-card .ob-label { justify-self: start; }
.ob-contact { display: grid; gap: var(--ob-space-2); align-content: start; }

/* --- Kartlar (16 tip kartı — views/cards/*) --- */
/* Kural 5: veri-önde kart — süsleme yok, hover hairline vurgusu + ok kayması. */
.ob-card { border: 1px solid var(--ob-line); border-radius: var(--radius); background: var(--ob-elevate); }
.ob-card:hover, .ob-card:focus-within { border-color: var(--ob-ink); }
.ob-card__title { font-size: var(--ob-text-lg); }
.ob-card__excerpt { font-size: var(--ob-text-sm); }

/* Medya bandı: sabit oran + hairline ayrım; görselsiz kart tipografik zemine
   düşer (kırık <img> kutusu blade @if'iyle zaten imkânsız). */
.ob-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ob-surface); border-bottom: 1px solid var(--ob-line); }
.ob-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ob-card__media--text { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--ob-text-4xl); font-weight: 700; color: var(--ob-muted); }
/* Köşe etiketi (foto sayısı, ürün rozeti): mikro-etiket zemin üstünde. */
.ob-card__flag { position: absolute; right: var(--ob-space-2); bottom: var(--ob-space-2); background: var(--ob-bg); }

/* Gövde: kartın veri sütunu (medyasız kartlarda tek katman). */
.ob-card__body { padding: var(--ob-space-4) var(--ob-space-5) var(--ob-space-5); display: grid; gap: var(--ob-space-2); align-content: start; }
.ob-card__meta { margin: 0; color: var(--ob-muted); font-size: var(--ob-text-sm); }

/* Ürün: fiyat rakamı display skalasında — rakam/etiket üstte (kural 5). */
.ob-card__price { margin: 0; font-family: var(--font-display); font-size: var(--ob-text-xl); font-weight: 700; }

/* Bölge küçük görseli: kompakt bağlantı kartının opsiyonel pulu. */
.ob-card__thumb { display: block; aspect-ratio: 16 / 6; overflow: hidden; border-bottom: 1px solid var(--ob-line); }
.ob-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Referans: alıntı öne, logo contain-fit dar bantta. */
.ob-card__logo { height: 5rem; padding: var(--ob-space-3) var(--ob-space-5) 0; }
.ob-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.ob-card__quote { margin: 0; font-size: var(--ob-text-sm); color: var(--ob-muted); border-left: 2px solid var(--ob-accent); padding-left: var(--ob-space-3); }

/* SSS kartı: <details> akordeon dili kart içinde. */
.ob-card__faq summary { cursor: pointer; list-style-position: inside; }
.ob-card__faq summary:hover { color: var(--ob-accent); }
.ob-card__faq > .ob-card__excerpt { margin-top: var(--ob-space-2); color: var(--ob-muted); }

.ob-arrow { display: inline-block; color: var(--ob-muted); transition: transform 180ms ease; }
.ob-card:hover .ob-arrow,
.ob-card:focus-within .ob-arrow,
a:hover > .ob-arrow,
a:focus-visible > .ob-arrow { transform: translateX(0.25rem); color: var(--ob-ink); }

.ob-b-listing-rows__arrow { transition: transform 180ms ease; }
.ob-b-listing-rows__list a:hover .ob-b-listing-rows__arrow,
.ob-b-listing-rows__list a:focus-visible .ob-b-listing-rows__arrow { transform: translateX(0.25rem); color: var(--ob-ink); }

/* --- Kompozisyon uyum katmanı --- */
/* detail:product split-top (karar #10 + M2 spec): mekânsal yerleşim
   kompozisyonla değil CSS ile — frame'in data-surface kancası üstünden
   media-showcase sola, künye (head+specs) sağa alınır. Medyasız üründe
   :has() eşleşmez, tek sütun akış bozulmadan kalır (boş-veri sözleşmesi). */
@media (min-width: 64rem) {
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "breadcrumb breadcrumb"
      "media head"
      "media specs"
      "body body"
      "related related"
      "cta cta";
    align-items: start;
    column-gap: var(--ob-space-6);
  }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="breadcrumb"] { grid-area: breadcrumb; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="media-showcase"] { grid-area: media; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="head"] { grid-area: head; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="specs"] { grid-area: specs; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="body"] { grid-area: body; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="related"] { grid-area: related; }
  [data-surface="detail:product"] .ob-detail__main:has([data-block="media-showcase"]) > [data-block="cta-band"] { grid-area: cta; }
}

/* --- Hareket + reduced-motion (kural 6) --- */
/* Tek geçiş dili: 180ms, yalnız opacity/transform (yukarıdaki ok kaymaları). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}