/* Derleme sonrası ortak erişilebilirlik ve kontrast güvenceleri. */
body[data-tasarim="00"] main .manset-kunye {
  border: 1px solid color-mix(in oklab, var(--color-murekkep) 12%, transparent);
  background: color-mix(in oklab, var(--color-kagit) 94%, transparent);
  backdrop-filter: blur(12px);
}

body[data-tasarim="00"] main .kart-manset.manset-koyu .manset-kunye {
  border-color: color-mix(in oklab, var(--color-kagit) 20%, transparent);
  background: color-mix(in oklab, var(--color-murekkep) 94%, var(--color-bordo-950));
  color: var(--color-kagit);
}

body[data-tasarim="00"] :is(.kart-manset.manset-koyu .manset-kunye, .mucella-koyu) .takvim-tarih {
  margin-bottom: 1rem;
  border-color: color-mix(in oklab, var(--color-kagit) 38%, transparent);
  background: var(--color-murekkep);
  color: var(--color-kagit);
}

:root[data-hareket="kapali"] main [data-baslik],
:root[data-hareket="kapali"] main [data-baslik] *,
:root[data-hareket="kapali"] main [data-reveal],
:root[data-hareket="kapali"] main [data-reveal] *,
:root[data-hareket="kapali"] main h1,
:root[data-hareket="kapali"] main h1 *,
:root[data-hareket="kapali"] main h2,
:root[data-hareket="kapali"] main h2 * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  translate: none !important;
  clip-path: none !important;
}

:root[data-hedef="genis"] body[data-tasarim] :where(main, footer, nav) :where(a, button, [role="button"], summary) {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Hero metin ve kontrol eksenleri bütün tasarımlarda site kabıyla aynıdır. */
body[data-tasarim] {
  --hero-kap-kenari: max(32px, calc((100% - 1280px) / 2));
}

body[data-tasarim="00"] .portal-hero__icerik {
  width: min(calc(100% - 64px), 1280px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

[data-tasarim="01"] .n01-hero__baslik,
[data-tasarim="02"] .n02-hero__panel h2,
[data-tasarim="04"] .n04-hero__baslik h2 {
  left: var(--hero-kap-kenari);
}

[data-tasarim="01"] .n01-hero__kart,
[data-tasarim="02"] .n02-hero__kart,
[data-tasarim="04"] .n04-hero__panel,
[data-tasarim="01"] .n01-hero__kontroller,
[data-tasarim="02"] .n02-hero__kontroller,
[data-tasarim="04"] .n04-hero__kontroller {
  right: var(--hero-kap-kenari);
}

[data-tasarim="03"] .n03-hero__metin {
  inset-inline: var(--hero-kap-kenari);
  width: auto;
  padding-inline: 0;
}

@media (max-width: 800px) {
  body[data-tasarim] { --hero-kap-kenari: 14px; }

  body[data-tasarim="00"] .portal-hero__icerik {
    width: calc(100% - 28px);
  }

  [data-tasarim="01"] .n01-hero__baslik,
  [data-tasarim="02"] .n02-hero__panel h2,
  [data-tasarim="04"] .n04-hero__baslik h2 {
    right: var(--hero-kap-kenari);
  }

  [data-tasarim="01"] .n01-hero__kart,
  [data-tasarim="02"] .n02-hero__kart,
  [data-tasarim="04"] .n04-hero__panel {
    right: var(--hero-kap-kenari);
    left: var(--hero-kap-kenari);
  }
}

/* Bütün sayfa ve iç-sayfa başlıkları aynı 1280 px eksende durur. */
body[data-tasarim="00"] :is(header, main, footer) .max-w-7xl,
body[data-tasarim="00"] .ic-sayfa-ust--belgeler {
  width: min(calc(100% - 64px), 1280px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

[data-tasarim="01"] :is(.sh-kap, .n01-kap),
[data-tasarim="02"] :is(.iz-kap, .n02-kap),
[data-tasarim="03"] :is(.kt-kap, .n03-kap),
[data-tasarim="04"] :is(.ak-kap, .n04-kap) {
  width: min(calc(100% - 64px), 1280px);
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

body[data-tasarim="00"] .ic-sayfa-ust--belgeler,
[data-tasarim="01"] .ic-sayfa-ust > :is(.sh-kap, .sh-detay),
[data-tasarim="02"] .ic-sayfa-ust > .iz-kap,
[data-tasarim="03"] .ic-sayfa-ust > .kt-kap,
[data-tasarim="04"] .ic-sayfa-ust > .ak-kap {
  width: min(calc(100% - 64px), 1280px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

body[data-tasarim="00"] main > .ic-sayfa-ust:not(.ic-sayfa-ust--belgeler) > :last-child {
  width: min(calc(100% - 64px), 1280px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

/* Font değişimi ve sözcük animasyonu satır/harf ölçüsünü değiştirmesin. */
body[data-tasarim] main :where(h1, h2, h3, [data-baslik]) {
  font-kerning: normal;
  font-synthesis: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

body[data-tasarim] .bs-kelime {
  max-width: none;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

body[data-tasarim] :is(.n01-hero__sahne, .n02-hero__grid, .n03-hero__cerceve, .n04-hero__kabuk) {
  contain: layout paint;
}

/* Fade sırasında iki slaytın opaklığı kesişirken alttan beyaz sayfa akmasın. */
body[data-tasarim="00"] :is([data-hero], [data-hero] .swiper, [data-hero] .swiper-wrapper, [data-hero] .swiper-slide),
[data-tasarim="01"] :is(.n01-hero, .n01-hero__swiper, .n01-hero__swiper .swiper-wrapper, .n01-hero__swiper .swiper-slide),
[data-tasarim="02"] :is(.n02-hero, .n02-hero__swiper, .n02-hero__swiper .swiper-wrapper, .n02-hero__swiper .swiper-slide),
[data-tasarim="03"] :is(.n03-hero, .n03-hero__swiper, .n03-hero__swiper .swiper-wrapper, .n03-hero__swiper .swiper-slide),
[data-tasarim="04"] :is(.n04-hero, .n04-hero__swiper, .n04-hero__swiper .swiper-wrapper, .n04-hero__swiper .swiper-slide) {
  background-color: var(--color-murekkep);
}

body[data-tasarim] :is(.n01-hero__swiper, .n02-hero__swiper, .n03-hero__swiper, .n04-hero__swiper, [data-hero] .swiper) {
  isolation: isolate;
}

body[data-tasarim] :is(.n01-hero__gorsel img, .n02-hero__foto img, .n03-hero__gorsel img, .n04-hero__gorsel img, [data-hero] img) {
  background-color: var(--color-murekkep);
}

body[data-tasarim] :is(.n01-hero__icerik, .n02-hero__panel, .n03-hero__metin, .n04-hero__baslik) {
  box-sizing: border-box;
  transform-origin: center;
}

/* 01 · Sahne: başlık ve özet aynı sol eksende, sinematik ve yalın. */
[data-tasarim="01"] .n01-hero__gorsel::after {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--color-murekkep) 72%, transparent), transparent 64%),
    linear-gradient(0deg, color-mix(in oklab, var(--color-murekkep) 46%, transparent), transparent 55%);
}

[data-tasarim="01"] .n01-hero__baslik {
  top: clamp(4.5rem, 11vh, 7.5rem);
  bottom: auto;
  width: min(8.5ch, 64vw);
  max-width: none;
  font-size: clamp(3.8rem, 7.2vw, 7.6rem);
  line-height: .82;
}

[data-tasarim="01"] .n01-hero__kart {
  right: auto;
  bottom: clamp(2rem, 5vh, 4rem);
  left: var(--hero-kap-kenari);
  width: min(34rem, calc(100% - (2 * var(--hero-kap-kenari))));
  min-height: 0;
  border-left: 2px solid var(--color-altin-300);
  border-radius: 0;
  background: color-mix(in oklab, var(--color-murekkep) 76%, transparent);
  box-shadow: none;
}

/* 02 · Mihenk: fotoğrafın üzerinde yarı saydam editoryal sol levha. */
[data-tasarim="02"] .n02-hero__grid::after {
  z-index: 2;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--color-kagit) 96%, transparent) 0,
      color-mix(in oklab, var(--color-kagit) 91%, transparent) 43%,
      transparent 64%),
    linear-gradient(0deg, color-mix(in oklab, var(--color-murekkep) 24%, transparent), transparent 48%);
}

[data-tasarim="02"] .n02-hero__panel { z-index: 3; }
[data-tasarim="02"] .n02-hero__kontroller { z-index: 4; }

[data-tasarim="02"] .n02-hero__panel h2 {
  top: clamp(4.5rem, 11vh, 8rem);
  bottom: auto;
  width: min(8ch, 39vw);
  color: var(--color-murekkep);
  text-shadow: none;
  font-size: clamp(3.5rem, 6.4vw, 6.6rem);
  line-height: .86;
}

[data-tasarim="02"] .n02-hero__kart {
  right: auto;
  bottom: clamp(2rem, 5vh, 4rem);
  left: var(--hero-kap-kenari);
  width: min(28rem, 37vw);
  min-height: 0;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--color-bordo-600);
  background: transparent;
  backdrop-filter: none;
}

/* 03 · Miras: merkezî, törensel sahne; diğerlerinden bilinçli olarak simetrik. */
[data-tasarim="03"] .n03-hero__metin {
  inset-inline: var(--hero-kap-kenari);
  width: auto;
  padding-inline: clamp(1rem, 5vw, 5rem);
}

[data-tasarim="03"] .n03-hero__metin h2 {
  max-width: 11ch;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .9;
}

/* 04 · Çerçeve: kesik fotoğraf geometrisi ve yüzen koyu bilgi modülü. */
[data-tasarim="04"] .n04-hero__gorsel {
  clip-path: polygon(0 0, 100% 0, 100% 84%, 58% 100%, 0 90%);
}

[data-tasarim="04"] .n04-hero__kabuk::after {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--color-bordo-950) 66%, transparent), transparent 58%),
    linear-gradient(0deg, color-mix(in oklab, var(--color-murekkep) 42%, transparent), transparent 52%);
}

[data-tasarim="04"] .n04-hero__baslik h2 {
  top: clamp(4.25rem, 10vh, 7rem);
  bottom: auto;
  width: min(8ch, 56vw);
  font-size: clamp(3.8rem, 7.2vw, 7.4rem);
  line-height: .82;
}

[data-tasarim="04"] .n04-hero__panel {
  top: auto;
  right: var(--hero-kap-kenari);
  bottom: clamp(2rem, 5vh, 4rem);
  width: min(28rem, 34vw);
  border-radius: 1rem 1rem 1rem 0;
  background: color-mix(in oklab, var(--color-bordo-950) 88%, transparent);
  box-shadow: 0 24px 72px color-mix(in oklab, var(--color-murekkep) 24%, transparent);
}

/* 04'ün servis alanı yatay kart rayıdır; 02 masonry, 03 editoryal ızgara,
   01 bento düzeninden açıkça ayrılır. */
[data-tasarim="04"] .n04-servis__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 31%);
  grid-template-columns: none;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: .5rem .25rem 1.5rem;
}

[data-tasarim="04"] .n04-servis__kart {
  width: auto;
  min-height: 260px;
  scroll-snap-align: start;
}

/* İç sayfa tepeleri aynı eksende, fakat varyantların yüzey dili ayrı kalır. */
[data-tasarim="01"] .ic-sayfa-ust {
  background: linear-gradient(125deg, var(--color-bordo-950), var(--sh-koyu));
}

[data-tasarim="02"] .ic-sayfa-ust {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--color-altin-300) 16%, var(--color-kagit)), transparent 58%),
    var(--iz-y1);
}

/* 02'de panel açılıyordu ancak hero daha sonra boyandığı için üstünü örtüyordu. */
[data-tasarim="02"] .iz-kusak {
  position: relative;
  z-index: 70;
}

[data-tasarim="02"] .iz-mega {
  z-index: 80;
}

[data-tasarim="03"] .ic-sayfa-ust {
  background:
    radial-gradient(circle at 82% 22%, color-mix(in oklab, var(--color-bordo-600) 28%, transparent), transparent 32%),
    var(--kt-koyu);
}

[data-tasarim="04"] .ic-sayfa-ust {
  border-bottom: 1px solid color-mix(in oklab, var(--color-bordo-700) 22%, transparent);
  background:
    linear-gradient(90deg, var(--color-bordo-800) 0 10px, transparent 10px),
    color-mix(in oklab, var(--color-bordo-950) 9%, var(--color-kagit));
}

@media (max-width: 800px) {
  body[data-tasarim="00"] :is(header, main, footer) .max-w-7xl,
  body[data-tasarim="00"] .ic-sayfa-ust--belgeler,
  [data-tasarim="01"] :is(.sh-kap, .n01-kap),
  [data-tasarim="02"] :is(.iz-kap, .n02-kap),
  [data-tasarim="03"] :is(.kt-kap, .n03-kap),
  [data-tasarim="04"] :is(.ak-kap, .n04-kap) {
    width: min(calc(100% - 28px), 1280px);
  }

  body[data-tasarim="00"] .ic-sayfa-ust--belgeler,
  [data-tasarim="01"] .ic-sayfa-ust > :is(.sh-kap, .sh-detay),
  [data-tasarim="02"] .ic-sayfa-ust > .iz-kap,
  [data-tasarim="03"] .ic-sayfa-ust > .kt-kap,
  [data-tasarim="04"] .ic-sayfa-ust > .ak-kap {
    width: min(calc(100% - 28px), 1280px) !important;
  }

  [data-tasarim="01"] .n01-hero__baslik,
  [data-tasarim="02"] .n02-hero__panel h2,
  [data-tasarim="04"] .n04-hero__baslik h2 {
    top: auto;
    right: var(--hero-kap-kenari);
    bottom: 13.25rem;
    left: var(--hero-kap-kenari);
    width: auto;
    max-width: none;
    font-size: clamp(2.8rem, 13vw, 4.7rem);
    line-height: .88;
  }

  [data-tasarim="01"] .n01-hero__kart,
  [data-tasarim="02"] .n02-hero__kart,
  [data-tasarim="04"] .n04-hero__panel {
    right: var(--hero-kap-kenari);
    bottom: var(--hero-kap-kenari);
    left: var(--hero-kap-kenari);
    width: auto;
    max-height: 11rem;
    overflow: auto;
  }

  [data-tasarim="02"] .n02-hero__grid::after {
    background: linear-gradient(0deg, color-mix(in oklab, var(--color-murekkep) 72%, transparent), transparent 72%);
  }

  [data-tasarim="02"] .n02-hero__panel h2 { color: var(--color-kagit); }
  [data-tasarim="02"] .n02-hero__kart { padding: 1rem; border-left-width: 2px; background: color-mix(in oklab, var(--color-murekkep) 64%, transparent); }
  [data-tasarim="04"] .n04-hero__gorsel { clip-path: none; }
  [data-tasarim="04"] .n04-servis__grid { grid-auto-columns: minmax(260px, 84%); }
  [data-tasarim="04"] .n04-servis__kart { min-height: 210px; }

  body[data-tasarim="00"] main > .ic-sayfa-ust:not(.ic-sayfa-ust--belgeler) > :last-child {
    width: min(calc(100% - 28px), 1280px) !important;
  }
}

/* Swiper sahneleri tek hareket motoruyla yönetilir. Varyant dosyalarında kalan
   CSS giriş animasyonları GSAP ile yarışıp harf ve overlay kaydırmamalıdır. */
[data-hero-swiper] {
  isolation: isolate;
  overflow: hidden;
  background: var(--color-murekkep);
}

[data-hero-swiper] :is(.swiper-wrapper, .swiper-slide) {
  background: var(--color-murekkep);
  backface-visibility: hidden;
  transform: translateZ(0);
}

[data-hero-swiper] img {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.js [data-hero-swiper] :is(
  [data-hero-line],
  [data-hero-fade],
  .n01-hero__icerik > *,
  .n02-hero__panel > *,
  .n03-hero__metin > *,
  .n04-hero__baslik > *
) {
  animation: none !important;
  transition: none !important;
  visibility: visible;
}

/* Logo okunabilirliği varyantlar arasında eşit bir görsel ağırlık taşır. */
[data-tasarim="01"] #masthead .ktb-logo,
[data-tasarim="02"] #masthead .ktb-logo,
[data-tasarim="03"] .kt-logo .ktb-logo {
  width: auto;
  height: 64px;
  max-height: 64px;
}

[data-tasarim="04"] .ak-logo .ktb-logo {
  width: 168px;
  max-width: 168px;
  height: auto;
}

/* Ana sayfa yatay kart rayları gerçek Swiper ölçülerini kullanır. */
.kart-swiper-nav {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.kart-swiper-nav button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--color-murekkep) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-kagit) 94%, transparent);
  color: var(--color-murekkep);
  transition: translate .3s var(--ease-giris), background-color .25s ease, color .25s ease;
}

.kart-swiper-nav button:hover:not(:disabled) {
  translate: 0 -.15rem;
  background: var(--color-bordo-700);
  color: var(--color-kagit);
}

.kart-swiper-nav button:disabled,
.kart-swiper-nav .swiper-button-disabled {
  opacity: .34;
  cursor: default;
}

[data-tasarim="01"] .n01-vitrin__eylem {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 1rem;
}

[data-tasarim="01"] .n01-kart-swiper,
[data-tasarim="04"] .n04-servis-swiper {
  width: 100%;
  overflow: hidden;
}

[data-tasarim="01"] .n01-kart-swiper .n01-kartlar,
[data-tasarim="04"] .n04-servis-swiper .n04-servis__grid {
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-flow: initial !important;
  gap: 0 !important;
  overflow: visible;
  padding: 0;
}

[data-tasarim="01"] .n01-kart-swiper .swiper-slide,
[data-tasarim="04"] .n04-servis-swiper .swiper-slide {
  height: auto;
}

[data-tasarim="01"] .n01-kart-swiper .n01-kart,
[data-tasarim="04"] .n04-servis-swiper .n04-servis__kart {
  width: auto;
  height: 100%;
  grid-column: auto !important;
}

[data-tasarim="01"] .n01-kart-swiper .n01-kart__gorsel,
[data-tasarim="01"] .n01-kart-swiper .n01-kart:first-child .n01-kart__gorsel {
  aspect-ratio: 4 / 3;
}

[data-tasarim="04"] .n04-servis-swiper .n04-servis__kart,
[data-tasarim="04"] .n04-servis-swiper .n04-servis__kart:nth-child(3n + 2),
[data-tasarim="04"] .n04-servis-swiper .n04-servis__kart:nth-child(4n) {
  min-height: 230px;
}

/* Başlıklar her sayfada container'ın sol ekseninden başlar. */
body[data-tasarim] main :where(h1, h2, h3, h4, [data-baslik]),
body[data-tasarim] main :where(.n01-vitrin__ust, .n01-haber__ust, .n04-servis__ust) {
  text-align: left;
}

/* İç sayfa manşeti hero kadar büyümez; uzun kamu başlıklarında satır ritmi korunur. */
body[data-tasarim="00"] .ic-sayfa-ust h1,
[data-tasarim="01"] .ic-sayfa-ust .sh-manset,
[data-tasarim="02"] .ic-sayfa-ust .iz-manset,
[data-tasarim="03"] .ic-sayfa-ust .kt-manset,
[data-tasarim="04"] .ic-sayfa-ust .ak-h1manset {
  max-width: 18ch;
  margin-inline: 0 auto;
  font-size: clamp(2.65rem, 4.5vw, 4.75rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em;
  text-align: left;
}

body[data-tasarim="00"] [data-hero-swiper] .portal-hero__icerik {
  align-items: flex-start;
  justify-content: center;
  padding-block: 3rem 6.5rem;
  text-align: left;
}

body[data-tasarim="00"] [data-hero-swiper] .portal-hero__icerik > :is(h2, p, div) {
  align-self: flex-start;
  margin-inline: 0 auto;
  text-align: left;
}

body[data-tasarim] .ic-sayfa-ust :where(p, .sh-govde, .iz-govde, .kt-govde, .ak-govde),
body[data-tasarim] [data-hero-swiper] :where(p, small),
body[data-tasarim] main :where(.n01-bolum__ust, .n01-vitrin__ust, .n01-haber__ust, .n02-baslik, .n03-alanlar__ust, .n04-servis__ust) p {
  margin-inline: 0 auto;
  text-align: left;
}

[data-tasarim="03"] .ic-sayfa-ust .kt-ic-manset-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 1.25rem;
}

[data-tasarim="03"] .ic-sayfa-ust .kt-ic-ozet {
  width: min(100%, 46rem);
  justify-items: start;
  padding-bottom: 0;
  text-align: left;
}

body[data-tasarim="00"] .ic-sayfa-ust > .max-w-7xl > p[data-reveal],
[data-tasarim="01"] .ic-sayfa-ust > .sh-detay > p.sh-govde,
[data-tasarim="02"] .ic-sayfa-ust > .iz-kap > p.iz-govde,
[data-tasarim="03"] .ic-sayfa-ust .kt-ic-ozet > p,
[data-tasarim="04"] .ic-sayfa-ust > .ak-kap > p.ak-govde {
  display: -webkit-box;
  max-width: 62ch;
  overflow: hidden;
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

[data-tasarim="03"] [data-hero-swiper] .n03-hero__metin {
  justify-items: start;
  padding-inline: 0;
  text-align: left;
}

[data-tasarim="03"] [data-hero-swiper] .n03-hero__metin h2 {
  margin-inline: 0 auto;
}

/* Varyant hero'larında metin grubu, farklı içerik uzunluklarında da sahnenin
   dikey merkezinde kalır; tek tek top/bottom değerleri kullanılmaz. */
[data-tasarim="01"] [data-hero-swiper] .n01-hero__icerik,
[data-tasarim="02"] [data-hero-swiper] .n02-hero__panel,
[data-tasarim="03"] [data-hero-swiper] .n03-hero__metin,
[data-tasarim="04"] [data-hero-swiper] .n04-hero__baslik {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.35rem;
  width: 100%;
  padding: 2.5rem var(--hero-kap-kenari) 6rem;
  text-align: left;
}

[data-tasarim="01"] [data-hero-swiper] .n01-hero__baslik,
[data-tasarim="02"] [data-hero-swiper] .n02-hero__panel h2,
[data-tasarim="03"] [data-hero-swiper] .n03-hero__metin h2,
[data-tasarim="04"] [data-hero-swiper] .n04-hero__baslik h2,
[data-tasarim="01"] [data-hero-swiper] .n01-hero__kart,
[data-tasarim="02"] [data-hero-swiper] .n02-hero__kart,
[data-tasarim="03"] [data-hero-swiper] .n03-hero__alt,
[data-tasarim="04"] [data-hero-swiper] .n04-hero__panel {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  translate: none;
}

[data-tasarim="01"] [data-hero-swiper] .n01-hero__baslik,
[data-tasarim="02"] [data-hero-swiper] .n02-hero__panel h2,
[data-tasarim="04"] [data-hero-swiper] .n04-hero__baslik h2 {
  width: min(12ch, 68vw);
}

/* Manşet fotoğrafı bastırmadan güçlü kalır; uzun yer adları kontrollü kırılır. */
body[data-tasarim="00"] [data-hero-swiper] .portal-hero__icerik h2 {
  font-size: clamp(3.15rem, 5.75vw, 5.65rem);
}

[data-tasarim="01"] [data-hero-swiper] .n01-hero__baslik,
[data-tasarim="04"] [data-hero-swiper] .n04-hero__baslik h2 {
  font-size: clamp(3.25rem, 6.1vw, 6.4rem);
}

[data-tasarim="02"] [data-hero-swiper] .n02-hero__panel h2,
[data-tasarim="03"] [data-hero-swiper] .n03-hero__metin h2 {
  font-size: clamp(3.1rem, 5.7vw, 5.9rem);
}

[data-tasarim="03"] [data-hero-swiper] .n03-hero__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Hero denetimleri başlık/özet/eylem akışının hemen altında aynı sol eksendedir.
   Alt kenara sabitlemek içerik grubunu yukarıda, pagination'ı kopuk bırakıyordu. */
[data-tasarim="01"] .n01-hero__kontroller,
[data-tasarim="02"] .n02-hero__kontroller,
[data-tasarim="03"] .n03-hero__kontroller,
[data-tasarim="04"] .n04-hero__kontroller {
  inset: var(--hero-kontrol-top, calc(50% + 4.25rem)) auto auto var(--hero-kap-kenari);
  top: var(--hero-kontrol-top, calc(50% + 4.25rem));
  right: auto;
  bottom: auto;
  left: var(--hero-kap-kenari);
  justify-content: flex-start;
  transform: none;
  translate: none;
}

body[data-tasarim="00"] [data-hero] > [data-hero-controls] {
  top: var(--hero-kontrol-top, calc(50% + 4.25rem));
  bottom: auto;
}

body[data-tasarim="00"] [data-hero] > [data-hero-controls] > div {
  padding-bottom: 0;
}

@media (max-width: 800px) {
  body[data-tasarim="00"] [data-hero-swiper] .portal-hero__icerik h2,
  [data-tasarim="01"] [data-hero-swiper] .n01-hero__baslik,
  [data-tasarim="02"] [data-hero-swiper] .n02-hero__panel h2,
  [data-tasarim="03"] [data-hero-swiper] .n03-hero__metin h2,
  [data-tasarim="04"] [data-hero-swiper] .n04-hero__baslik h2 {
    font-size: clamp(2.55rem, 11.5vw, 4.25rem);
  }
}

[data-tasarim="01"] .n01-vitrin__ust {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}

[data-tasarim="01"] .n01-vitrin__eylem {
  justify-self: start;
}

/* İç sayfa alt bölüm kartları daha yoğun ve okunabilir ölçüdedir. */
body[data-tasarim="00"] main > .mx-auto.grid .card-edit > .aspect-\[16\/9\] {
  aspect-ratio: 16 / 8;
}

body[data-tasarim="00"] main > .mx-auto.grid .card-edit > .p-6 {
  padding: 1.05rem 1.15rem;
}

[data-tasarim="01"] .sh-detay .sh-kartlar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

[data-tasarim="01"] .sh-detay .sh-kart--portre .sh-kart__gorsel {
  aspect-ratio: 4 / 3;
}

[data-tasarim="01"] .sh-detay .sh-kart__ad {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

[data-tasarim="02"] .iz-detay .iz-g1,
[data-tasarim="03"] .kt-ic-kartlar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

[data-tasarim="02"] .iz-detay .iz-kart__gorsel,
[data-tasarim="03"] .kt-ic-kart .kt-kart__gorsel {
  aspect-ratio: 16 / 9;
}

[data-tasarim="03"] .kt-ic-kart .kt-kart__ic {
  padding: 1rem 1.1rem;
}

[data-tasarim="04"] .ak-detay .ak-g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

[data-tasarim="04"] .ak-detay .ak-satirkart {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 76px;
  padding: .55rem;
}

[data-tasarim="04"] .ak-detay .ak-satirkart__ad {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

/* Sayfa değişimi perde kullanmaz; iki kök görüntü çok kısa bir süre karışır. */
@view-transition { navigation: auto; }

@keyframes ktb-sayfa-eski {
  to { opacity: .18; transform: translateY(-5px); filter: blur(2px); }
}

@keyframes ktb-sayfa-yeni {
  from { opacity: 0; transform: translateY(7px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

::view-transition-old(root) {
  animation: .2s cubic-bezier(.55, 0, 1, .45) both ktb-sayfa-eski;
}

::view-transition-new(root) {
  animation: .38s .02s cubic-bezier(.16, 1, .3, 1) both ktb-sayfa-yeni;
}

@media (max-width: 900px) {
  [data-tasarim="01"] .sh-detay .sh-kartlar,
  [data-tasarim="02"] .iz-detay .iz-g1,
  [data-tasarim="03"] .kt-ic-kartlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-tasarim="00"] .ic-sayfa-ust h1,
  [data-tasarim="01"] .ic-sayfa-ust .sh-manset,
  [data-tasarim="02"] .ic-sayfa-ust .iz-manset,
  [data-tasarim="03"] .ic-sayfa-ust .kt-manset,
  [data-tasarim="04"] .ic-sayfa-ust .ak-h1manset {
    font-size: clamp(2.15rem, 10vw, 3.35rem) !important;
    line-height: 1 !important;
  }

  [data-tasarim="01"] #masthead .ktb-logo,
  [data-tasarim="02"] #masthead .ktb-logo,
  [data-tasarim="03"] .kt-logo .ktb-logo {
    height: 54px;
    max-height: 54px;
  }

  [data-tasarim="04"] .ak-logo .ktb-logo {
    width: 150px;
    max-width: 150px;
  }

  [data-tasarim="01"] .n01-vitrin__eylem {
    width: 100%;
    justify-self: start;
    justify-content: space-between;
  }

  [data-tasarim="01"] .sh-detay .sh-kartlar,
  [data-tasarim="02"] .iz-detay .iz-g1,
  [data-tasarim="03"] .kt-ic-kartlar,
  [data-tasarim="04"] .ak-detay .ak-g2 {
    grid-template-columns: 1fr;
  }

  [data-tasarim="04"] .n04-servis-swiper .n04-servis__kart,
  [data-tasarim="04"] .n04-servis-swiper .n04-servis__kart:nth-child(3n + 2),
  [data-tasarim="04"] .n04-servis-swiper .n04-servis__kart:nth-child(4n) {
    min-height: 190px;
  }
}