/* ════════════════════════════════════════════════════════════════════
   Ways of Heaven — ortak kabuk
   Fildişi zemin · altın varak çizgiler · editoryal serif · bol boşluk.
   Her sayfada yüklenir: renk değişkenleri, temel, düğmeler, üst çubuk,
   mobil menü, altbilgi, blog kartları. Ana sayfanın bölümleri
   anasayfa.css'te, uygulama (forum, profil, yönetim) style.css'tedir.
   Mantıksal özellikler (inline/block) kullanılır: RTL dillerde düzen
   kendiliğinden aynalanır.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --zemin:        #FBF8F3;
  --zemin-2:      #F6F0E6;
  --zemin-3:      #EEE4D3;
  --kart:         #FFFFFF;
  --murekkep:     #1E1912;
  --metin:        #4A4238;
  --soluk:        #736958;
  --cizgi:        #E9E0D1;
  --cizgi-koyu:   #D8C9AE;
  --altin:        #A87B3D;
  --altin-koyu:   #8A6327;
  --altin-acik:   #C9A46A;
  --altin-parlak: #E9CF9A;
  --altin-grad:   linear-gradient(135deg, #D0AA6A 0%, #A87B3D 50%, #87602A 100%);
  --altin-metin:  linear-gradient(120deg, #B98C4B 0%, #8A6327 45%, #B38443 100%);

  --golge-1: 0 1px 2px rgba(60, 45, 20, .04), 0 10px 30px -14px rgba(60, 45, 20, .16);
  --golge-2: 0 2px 6px rgba(60, 45, 20, .05), 0 30px 70px -28px rgba(90, 64, 25, .34);

  --serif: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Noto Naskh Arabic", "Noto Serif Devanagari", "Noto Serif Bengali", "Songti SC", "Hiragino Mincho ProN", serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari",
           "Noto Sans Bengali", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", system-ui, sans-serif;

  --kap:      1280px;
  --bosluk-x: clamp(20px, 5vw, 64px);
  --bolum-y:  clamp(72px, 8.6vw, 128px);   /* ardışık iki bölüm arası ≈ 2 × bu değer */
  --ust-yuk:  88px;
  --yumusak:  cubic-bezier(.2, .7, .1, 1);

  /* ince kâğıt dokusu: tek karo; zemin rengini değiştiren bölümler de
     üstüne serer ki bölüm geçişlerinde doku kesilmesin */
  --doku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── temel ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  color: var(--metin);
  font: 400 17px/1.7 var(--sans);
  font-variant-numeric: lining-nums;   /* kendi 'font' kısaltması olanlar için bkz. dosya sonu */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--doku), var(--zemin);   /* sayfayla birlikte kayar; sabit katman yok */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--murekkep);
  letter-spacing: -.012em;
  font-variant-numeric: lining-nums;
}
h1 em, h2 em, .altin-yazi {
  font-style: italic;
  font-weight: 400;
  background: var(--altin-metin);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline-end: .06em;   /* eğik harfin taşan kuyruğu kırpılmasın */
}
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 6px; }
::selection { background: #EAD6AE; color: var(--murekkep); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ik {
  width: 1.2em; height: 1.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon { width: 1.05em; height: 1.05em; fill: none; flex: none; }   /* sitenin eski sprite'ı */

.kap {
  width: 100%;
  max-width: calc(var(--kap) + var(--bosluk-x) * 2);
  margin-inline: auto;
  padding-inline: var(--bosluk-x);
}
.atla {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: 999px; background: var(--murekkep); color: #fff; text-decoration: none;
}
.atla:focus { top: 16px; }

/* ── ortak parçalar ────────────────────────────────────────────────── */

.ust-baslik {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 28px;
  font: 500 12px/1.2 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--altin-koyu);
}
/* ölçü cetveli: sitenin "ölçüm" imzası */
.olcek {
  width: 46px; height: 10px; flex: none;
  background:
    linear-gradient(var(--altin-acik), var(--altin-acik)) left bottom / 100% 1px no-repeat,
    linear-gradient(var(--altin), var(--altin)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--altin), var(--altin)) center bottom / 1px 10px no-repeat,
    linear-gradient(var(--altin), var(--altin)) right bottom / 1px 10px no-repeat,
    repeating-linear-gradient(90deg, var(--altin-acik) 0 1px, transparent 1px 5.625px) left bottom / 100% 5px no-repeat;
}

.dugme {
  --yuk: 56px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--yuk); padding: 0 30px;
  border: 1px solid transparent; border-radius: 999px;
  font: 500 15px/1 var(--sans); letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .5s var(--yumusak), box-shadow .5s var(--yumusak),
              background-color .3s, color .3s, border-color .3s;
}
.dugme .ik { width: 18px; height: 18px; }
.dugme .ok { transition: transform .5s var(--yumusak); }
.dugme:hover .ok { transform: translateX(4px); }
[dir="rtl"] .ok { scale: -1 1; }
[dir="rtl"] .dugme:hover .ok { transform: translateX(-4px); }

.dugme-altin {
  color: #FFFBF2;
  background: var(--altin-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 14px 30px -14px rgba(135, 96, 42, .75);
}
/* varak parıltısı: fareyle üzerine gelince soldan sağa bir ışık geçer */
.dugme-altin::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 222, .55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .9s var(--yumusak);
}
.dugme-altin:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 20px 40px -16px rgba(135, 96, 42, .85); }
.dugme-altin:hover::after { transform: translateX(120%); }

.dugme-cerceve {
  color: var(--murekkep);
  border-color: var(--cizgi-koyu);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dugme-cerceve:hover { border-color: var(--altin); color: var(--altin-koyu); background: #fff; }
.dugme-kucuk { --yuk: 44px; padding: 0 22px; font-size: 14px; }

.ok-link {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14.5px/1 var(--sans); letter-spacing: .02em;
  color: var(--murekkep); text-decoration: none;
  padding-bottom: 8px;
  background: linear-gradient(var(--altin), var(--altin)) left bottom / 100% 1px no-repeat;
  transition: color .3s, background-size .5s var(--yumusak);
}
.ok-link .ik { width: 17px; height: 17px; transition: transform .5s var(--yumusak); }
.ok-link:hover { color: var(--altin-koyu); }
.ok-link:hover .ik { transform: translateX(4px); }

.bolum { padding-block: var(--bolum-y); }
.bolum-bas {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px clamp(40px, 7vw, 120px);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.bolum-bas h2 {
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1;
}
.bolum-bas-yan { display: grid; justify-items: start; gap: 26px; padding-bottom: 8px; }
.bolum-bas-yan p { margin: 0; max-width: 34em; font-size: 17.5px; font-weight: 300; color: var(--metin); }

/* kaydırınca belirme — yalnızca JS varken gizlenir */
.js [data-goster] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.1s var(--yumusak), transform 1.2s var(--yumusak);
  transition-delay: calc(var(--s, 0) * 90ms);
}
.js [data-goster].gorundu, .js-yedek [data-goster] { opacity: 1; transform: none; }

/* ═══ ÜST ÇUBUK ═══════════════════════════════════════════════════════ */

.ust {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--ust-yuk);
  transition: transform .6s var(--yumusak), height .45s var(--yumusak);
}
.ust::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(251, 248, 243, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid rgba(216, 201, 174, .55);
  opacity: 0; transition: opacity .45s;
}
.ust.dolu { height: 72px; }
.ust.dolu::before { opacity: 1; }
.ust.gizli { transform: translateY(-100%); }
/* iç sayfalar: arkada hero yok, çubuk baştan dolu ve ince */
.ust-kati, .ust-kati.dolu { height: 72px; }
.ust-kati::before { opacity: 1; }
.ust-ic { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }

.marka { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--murekkep); flex: none; }
.marka-isaret { width: 32px; height: 40px; flex: none; overflow: visible; transition: transform .8s var(--yumusak); }
.marka:hover .marka-isaret { transform: translateY(-2px); }
.marka-kutu { display: grid; gap: 7px; }
.marka-yazi {
  font: 500 28px/1 var(--serif);
  letter-spacing: .004em;
  white-space: nowrap;
  color: var(--murekkep);
}
.marka-yazi em {
  font-style: italic; font-weight: 400;
  margin-inline: .04em .02em;
  background: var(--altin-metin); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline-end: .04em;
}
.marka-slogan {
  font: 500 8.5px/1 var(--sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--soluk);
  padding-inline-start: 2px;
}

.ust-nav { display: flex; gap: 2px; margin-inline: auto; }
.ust-nav a {
  position: relative;
  padding: 12px 15px;
  font: 400 15px/1 var(--sans); letter-spacing: .01em;
  color: var(--murekkep); text-decoration: none;
}
.ust-nav a::after {
  content: ""; position: absolute; inset-inline: 15px; bottom: 5px; height: 1px;
  background: var(--altin);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--yumusak);
}
.ust-nav a:hover::after, .ust-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.ust-nav a[aria-current="page"] { color: var(--altin-koyu); }

.ust-sag { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ust-nav + .ust-sag { margin-inline-start: 0; }
.ikon-dugme {
  position: relative;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid transparent;
  color: var(--murekkep); text-decoration: none;
  transition: border-color .3s, background-color .3s;
}
.ikon-dugme:hover { border-color: var(--cizgi-koyu); background: rgba(255, 255, 255, .7); }
.ust-giris {
  padding: 12px 14px; font: 400 15px/1 var(--sans);
  color: var(--murekkep); text-decoration: none;
}
.ust-giris:hover { color: var(--altin-koyu); }
.ust-avatar { display: flex; border-radius: 50%; }
.ust-avatar .avatar { width: 38px; height: 38px; border-radius: 50%; }
.ust-cta { margin-inline-start: 6px; }

/* bildirim zili */
.ust-zil.dolu { color: var(--altin-koyu); }
.zil-sayac {
  position: absolute; top: 3px; inset-inline-end: 1px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--altin-grad); color: #FFFBF2;
  font: 500 10.5px/1 var(--sans); box-shadow: 0 0 0 2px var(--zemin);
}

/* dil seçici + üye menüsü (açılır paneller) */
.dil-sec, .uye-menu { position: relative; }
.dil-sec summary, .uye-menu summary { list-style: none; cursor: pointer; }
.dil-sec summary::-webkit-details-marker, .uye-menu summary::-webkit-details-marker { display: none; }
.dil-sec summary {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 15px 0 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  font: 500 13px/1 var(--sans); letter-spacing: .1em; color: var(--murekkep);
  transition: border-color .3s, background-color .3s;
}
.dil-sec summary .ik { width: 18px; height: 18px; color: var(--altin); }
.dil-sec summary:hover, .dil-sec[open] summary { border-color: var(--altin); background: #fff; }
.dil-panel, .uye-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 12px);
  padding: 12px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 22px;
  box-shadow: var(--golge-2);
  animation: panel-gel .45s var(--yumusak);
}
.dil-panel {
  width: min(92vw, 460px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
@keyframes panel-gel { from { opacity: 0; transform: translateY(-8px); } }
.dil-panel a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.2; color: var(--metin); text-decoration: none;
}
.dil-panel a:hover { background: var(--zemin-2); color: var(--murekkep); }
.dil-panel a.aktif { background: var(--zemin-3); color: var(--murekkep); font-weight: 500; }

.uye-menu summary { border-radius: 50%; transition: box-shadow .3s; }
.uye-menu summary:hover, .uye-menu[open] summary { box-shadow: 0 0 0 2px var(--zemin), 0 0 0 3px var(--altin-acik); }
.uye-panel { width: 250px; display: grid; gap: 2px; }
.uye-panel-bas {
  display: grid; gap: 4px; margin: 0 0 6px; padding: 8px 12px 14px;
  border-bottom: 1px solid var(--cizgi);
}
.uye-panel-bas strong { font: 600 21px/1.1 var(--serif); color: var(--murekkep); overflow-wrap: anywhere; }
.uye-panel-bas span { font-size: 12.5px; letter-spacing: .08em; color: var(--soluk); }
.uye-panel a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.2; color: var(--metin); text-decoration: none;
}
.uye-panel a .ik { width: 18px; height: 18px; color: var(--altin); }
.uye-panel a:hover { background: var(--zemin-2); color: var(--murekkep); }
.uye-panel a:last-child { margin-top: 4px; border-top: 1px solid var(--cizgi); border-radius: 0 0 12px 12px; padding-top: 14px; }

/* hamburger */
.menu-dugme {
  display: none;
  width: 46px; height: 46px; padding: 0; margin-inline-start: 2px;
  border: 1px solid var(--cizgi-koyu); border-radius: 50%;
  background: rgba(255, 255, 255, .6); cursor: pointer;
  position: relative;
}
.menu-dugme span {
  position: absolute; left: 14px; right: 14px; height: 1.5px;
  background: var(--murekkep); border-radius: 2px;
  transition: transform .5s var(--yumusak), top .5s var(--yumusak);
}
.menu-dugme span:first-child { top: 18px; }
.menu-dugme span:last-child  { top: 26px; }
.menu-dugme[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:last-child  { top: 22px; transform: rotate(-45deg); }

.mobil-menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--ust-yuk) + 24px) var(--bosluk-x) max(32px, env(safe-area-inset-bottom));
  background: var(--zemin);
  overflow-y: auto;
  animation: menu-gel .5s var(--yumusak);
}
@keyframes menu-gel { from { opacity: 0; } }
.mobil-menu nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--cizgi);
  font: 500 clamp(32px, 8vw, 44px)/1.1 var(--serif);
  color: var(--murekkep); text-decoration: none;
  animation: satir-gel-kucuk .7s var(--yumusak) both;
  animation-delay: calc(var(--s) * 55ms + 80ms);
}
.mobil-menu nav a .ik { width: 22px; height: 22px; color: var(--altin); }
[dir="rtl"] .mobil-menu nav a .ik { scale: -1 1; }
@keyframes satir-gel-kucuk { from { opacity: 0; transform: translateY(18px); } }
.mobil-alt { display: grid; gap: 28px; }
.mobil-ikincil {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px;
}
.mobil-ikincil a {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15.5px; color: var(--metin); text-decoration: none;
}
.mobil-ikincil a .ik { width: 18px; height: 18px; color: var(--altin); }
.mobil-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.menu-acik { overflow: hidden; }

/* ═══ BLOG KARTLARI (ana sayfa + blog) ═══════════════════════════════ */

/* öne çıkan yazı tam genişlikte yatay; kalanlar altında yan yana */
.blog-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 56px);
}
.blog-kart { display: grid; gap: 24px; text-decoration: none; color: inherit; align-content: start; }
.blog-kart-buyuk {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 80px);
}
.blog-gorsel { position: relative; overflow: hidden; border-radius: 26px; background: var(--zemin-3); aspect-ratio: 16 / 10; }
.blog-kart-buyuk .blog-gorsel { aspect-ratio: 16 / 11; border-radius: 32px; }
.blog-kart-buyuk .blog-ozet { -webkit-line-clamp: 3; font-size: 17px; }
.blog-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--yumusak); }
.blog-kart:hover .blog-gorsel img { transform: scale(1.05); }
.blog-etiket {
  position: absolute; top: 18px; inset-inline-start: 18px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(255, 252, 246, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--murekkep);
}
.blog-metin { display: grid; gap: 12px; }
.blog-meta { font-size: 13px; letter-spacing: .06em; color: var(--soluk); }
.blog-baslik { font: 500 clamp(24px, 2.1vw, 30px)/1.16 var(--serif); color: var(--murekkep); transition: color .35s; }
.blog-kart-buyuk .blog-baslik { font-size: clamp(30px, 3vw, 42px); line-height: 1.08; max-width: 18ch; }
.blog-ozet {
  font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-oku { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font: 500 14px/1 var(--sans); color: var(--altin-koyu); }
.blog-oku .ik { width: 17px; height: 17px; }
.blog-kart:hover .blog-baslik { color: var(--altin-koyu); }
.blog-kart:hover .blog-oku .ok { transform: translateX(4px); }
.blog-oku .ok { transition: transform .5s var(--yumusak); }

/* ═══ ALTBİLGİ ═══════════════════════════════════════════════════════ */

.alt {
  position: relative; overflow: hidden;
  padding-top: clamp(40px, 5vw, 72px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 30%, #F1E7D6 100%);
}
.alt-cagri {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding-bottom: clamp(56px, 6vw, 88px); margin-bottom: clamp(56px, 6vw, 80px);
  border-bottom: 1px solid var(--cizgi-koyu);
}
.alt-cagri-metin { margin: 0; font: 500 clamp(34px, 4.4vw, 62px)/1.05 var(--serif); letter-spacing: -.015em; color: var(--murekkep); }
.alt-cagri-metin em { font-style: italic; font-weight: 400; background: var(--altin-metin); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; }
.alt-izgara { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px clamp(32px, 4vw, 64px); }
.marka-buyuk .marka-yazi { font-size: 34px; }
.marka-buyuk .marka-isaret { width: 38px; height: 48px; }
.alt-marka p { max-width: 26em; margin: 26px 0 30px; font-size: 15.5px; font-weight: 300; }
.sosyal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sosyal a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--cizgi-koyu); border-radius: 50%; color: var(--murekkep);
  transition: background .45s var(--yumusak), color .3s, border-color .3s, transform .5s var(--yumusak);
}
.sosyal a .ik { width: 20px; height: 20px; }
.sosyal a:hover { background: var(--altin-grad); color: #fff; border-color: transparent; transform: translateY(-3px); }
.alt-nav { display: grid; align-content: start; gap: 14px; }
.alt-nav-baslik { margin: 0 0 8px; font: 500 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--altin-koyu); }
.alt-nav a { width: fit-content; font-size: 15.5px; color: var(--metin); text-decoration: none; transition: color .3s; overflow-wrap: anywhere; }
.alt-nav a:hover { color: var(--altin-koyu); }
.alt-son {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap;
  margin-top: clamp(56px, 6vw, 88px); padding-block: 28px;
  border-top: 1px solid var(--cizgi-koyu);
  font-size: 13.5px; color: var(--soluk);
}
.alt-son p { margin: 0; }
.alt-soz { font: italic 400 17px/1 var(--serif); color: var(--altin-koyu); }
.alt-dev {
  margin: 0 0 -.2em; text-align: center; white-space: nowrap;
  font: 500 clamp(64px, 15.5vw, 250px)/1 var(--serif); letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(168, 123, 61, .3);
  user-select: none; pointer-events: none;
}
.alt-dev em { font-style: italic; font-weight: 400; }
/* yönetim paneli: yalnızca son satır */
.alt-sade { padding-top: 0; }
.alt-sade .alt-son { margin-top: 24px; }

.bildirim {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90;
  translate: -50% 0;
  padding: 13px 22px; border-radius: 999px;
  background: var(--murekkep); color: #FFF8EC; font-size: 14.5px;
  box-shadow: var(--golge-2);
  animation: panel-gel .4s var(--yumusak);
}

/* ── ana sayfada anlık bildirimler (giriş sonrası vb.) ──────────────── */
.ana .flas-alan {
  position: fixed; top: calc(var(--ust-yuk) + 12px); left: 50%; z-index: 55;
  translate: -50% 0; width: min(92vw, 560px);
  display: grid; gap: 8px;
}

/* ═══ DUYARLI ════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .ust-nav, .ust-giris { display: none; }
  .menu-dugme { display: block; }
}

@media (max-width: 1080px) {
  .alt-izgara { grid-template-columns: 1fr 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --ust-yuk: 76px; }
  .ust.dolu, .ust-kati { height: 66px; }
  .bolum-bas { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .blog-izgara { grid-template-columns: 1fr; }
  .blog-kart-buyuk { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .ust-cta { display: none; }
  .ust-ic { gap: 12px; }
  .ust-sag { gap: 6px; }
  .marka-yazi { font-size: 24px; }
  .marka-isaret { width: 27px; height: 34px; }
  .marka-slogan { font-size: 7.5px; letter-spacing: .36em; }
  .dil-sec summary { padding: 0 12px 0 10px; }
  .dil-panel { position: fixed; inset-inline: 12px; top: 72px; width: auto; grid-template-columns: repeat(2, 1fr); }
  .uye-panel { position: fixed; inset-inline: 12px; top: 72px; width: auto; }

  .blog-izgara { gap: 48px; }

  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .alt-cagri .dugme { width: 100%; }
  .alt-cagri-metin br { display: none; }
}

@media (max-width: 520px) {
  /* dar ekranda çubuğa yalnızca logo, dil ve menü sığar: zil, hesap ve arama
     tam ekran menüde (iç sayfalarda ayrıca alttaki şeritte) */
  .ust-ara, .ust-zil, .uye-menu { display: none; }
}

@media (max-width: 420px) {
  .marka-slogan { display: none; }
  .ikon-dugme { width: 40px; height: 40px; }
}

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

/* ═══ VARAK: altın yazılarda hafif metalik degrade ════════════════════
   Yalnızca yazılarda: toprak-altın degradeye yumuşak bir açık altın bandı
   katılır. Düğme, kart ve çizimler düz altın kalır; hareket ve doku yok.
   <body class="varak"> ile açılır; ayar: anasayfa_varak (1/0).          */

:root {
  --altin-metal-yazi: linear-gradient(115deg, #9C7033 0%, #B38544 34%, #CDA766 50%, #A57838 66%, #86602A 100%);
}

.varak :is(h1 em, h2 em, .marka-yazi em, .alt-cagri-metin em, .sira-no) {
  background: var(--altin-metal-yazi);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── en sonda kalmalı ──────────────────────────────────────────────
   'font' kısaltması font-variant-numeric'i (Chrome'da font-feature-settings'i
   de) sıfırlıyor; Cormorant'ın eski üslup rakamları "19"u "1g" gibi gösterir.
   Serif yazıyı kısaltmayla kuran her öğede rakamları yeniden çizgisel yap. */
.marka-yazi, .mobil-menu nav a, .blog-baslik, .alt-cagri-metin, .alt-soz, .alt-dev,
.uye-panel-bas strong { font-variant-numeric: lining-nums; }

/* ── Faz 25: blog altında forum tartışması ─────────────────────────── */
.yazi-tartisma { margin: 3rem auto 0; max-width: 46rem; }
.yazi-tartisma .bolum-bas { align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.tartisma-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.tartisma-satir {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border: 1px solid var(--cizgi, rgba(0,0,0,.08));
  border-radius: .7rem; background: var(--kart, #fff);
}
.tartisma-satir > div { min-width: 0; }
.tartisma-ust { margin: 0 0 .2rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tartisma-metin { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.tartisma-alt { margin: 1.1rem 0 0; }

/* konu sayfasında "bu tartışma şu yazıdan doğdu" şeridi */
.konu-kaynak-yazi {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem; border-radius: .6rem;
  background: var(--zemin-2); font-size: .93rem;
}
.konu-kaynak-yazi span { opacity: .75; }

/* yönetim: bağlı forum konusu seçici */
.stu-konu { display: grid; gap: .4rem; }
.stu-konu-ara { font-size: .92rem; }
.stu-konu-secim { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   DESTEK PLANLARI  (planlar.php)                           [Faz 26]

   Sayfanın omurgası ölçü cetvelidir: destek bir paket değil, cetvel
   üzerinde işaretlenen bir ölçüdür. Ana sayfanın dili (fildişi zemin,
   varak çizgi, editoryal serif, 30px yarıçap) aynen sürer; ölçüler px
   ve clamp() ile verilir — sayfanın geri kalanıyla aynı ritim.
   Mantıksal özellikler kullanılır: RTL'de düzen kendiliğinden aynalanır.
   ═══════════════════════════════════════════════════════════════════ */

.pl { --pl-kart: 30px; }
.pl h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; }
.pl h3 { font-family: var(--serif); font-weight: 500; color: var(--murekkep); }
.pl p  { margin: 0; }

/* ── 1 · giriş + tutar aracı ──────────────────────────────────────── */

.pl-bas {
  position: relative;
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 104px);
  background: var(--doku), linear-gradient(170deg, var(--zemin-2) 0%, var(--zemin) 58%);
}
/*  Varak ayraçlar: bölüm artık sayfanın ortasında, iki ucu da
    kapatılıyor.                                                      */
.pl-bas::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cizgi-koyu) 22%, var(--cizgi-koyu) 78%, transparent);
}
.pl-bas { border-top: 1px solid var(--cizgi); }
.pl-bas-ic {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
}

.pl-soz { padding-top: clamp(8px, 2vw, 32px); }
.pl-soz h1 {
  margin: 0 0 26px;
  font: 500 clamp(44px, 5.6vw, 84px)/1 var(--serif);
  letter-spacing: -.02em;
  color: var(--murekkep);
}
.pl-soz h1 em { font-style: italic; font-weight: 400; }
.pl-giris { max-width: 32em; font-size: clamp(17px, 1.25vw, 19px); font-weight: 300; line-height: 1.7; }

/* kanıt şeridi: uydurma rakam yok, hepsi veritabanından */
/*  Üç sütunlu ızgara — esnek sarmalama DEĞİL: sarınca aradaki varak
    ayraç satır başında asılı kalıyordu. Etiket iki satıra düşebilsin
    diye sütunlar eşit genişlikte.                                    */
.pl-kanit {
  list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  max-width: 46rem;
}
.pl-kanit li { display: grid; align-content: start; gap: 6px; }
.pl-kanit strong {
  font: 500 clamp(34px, 3.6vw, 50px)/1 var(--serif);
  color: var(--murekkep); font-variant-numeric: lining-nums tabular-nums;
}
.pl-kanit span { font-size: 12px; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--soluk); }
.pl-kanit li + li { padding-inline-start: clamp(18px, 2.4vw, 36px); border-inline-start: 1px solid var(--cizgi-koyu); }

/* ── tutar aracı: sayfa boyunca görünür kalan asıl eylem ─────────── */

.pl-arac {
  position: sticky; top: calc(72px + 20px);
  display: grid; gap: 0;
  padding: clamp(28px, 2.6vw, 38px);
  border-radius: var(--pl-kart);
  background: #fff;
  box-shadow: var(--golge-2);
  isolation: isolate;
}
.pl-arac::before {              /* varak ince çerçeve */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: var(--altin-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pl-arac h2 { font-size: clamp(23px, 1.8vw, 27px); line-height: 1.2; margin-bottom: 20px; }

/* dönem seçimi */
.pl-donem-secim {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; margin-bottom: 10px;
  border: 1px solid var(--cizgi-koyu); border-radius: 999px;
  background: var(--zemin-2);
}
.pl-donem-dugme {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 42px; border-radius: 999px;
  font: 500 14.5px/1 var(--sans); letter-spacing: .01em;
  color: var(--metin); text-decoration: none;
  transition: color .35s var(--yumusak);
}
.pl-donem-dugme.etkin { color: #FFFBF2; }
.pl-donem-kizak {
  position: absolute; z-index: 0; inset: 4px auto 4px 4px;
  width: calc(50% - 4px); border-radius: 999px;
  background: var(--altin-grad);
  box-shadow: 0 8px 18px -10px rgba(135, 96, 42, .8);
  transition: transform .5s var(--yumusak);
}
.pl-donem-secim:has(.pl-donem-dugme:last-child.etkin) .pl-donem-kizak { transform: translateX(100%); }
[dir="rtl"] .pl-donem-secim:has(.pl-donem-dugme:last-child.etkin) .pl-donem-kizak { transform: translateX(-100%); }
.pl-yillik-not {
  margin: 0 0 4px; height: 0; overflow: hidden; opacity: 0;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-koyu);
  text-align: center;
  transition: opacity .4s, height .4s var(--yumusak);
}
.pl-yillik-not.gorunur { height: 22px; opacity: 1; }

/*  Faz 30 — kesilmiş desteğin dönüş notu. Kutunun içinde durur, o
    yüzden gölgesiz ve dar; kutunun sakinliğini bozmamalı.            */
.pl-geri-donus {
  margin: 0 0 16px; padding: 12px 16px;
  box-shadow: none; font-size: 13.5px; line-height: 1.6;
}

/* tutar girdisi */
.pl-tutar { display: block; margin-top: 14px; }
.pl-etiket {
  display: block; margin-bottom: 8px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--soluk);
}
.pl-girdi {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 18px 14px;
  border: 1px solid var(--cizgi-koyu); border-radius: 20px;
  background: var(--zemin);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.pl-girdi:focus-within { border-color: var(--altin); background: #fff; box-shadow: 0 0 0 3px rgba(201, 164, 106, .22); }
.pl-im { font: 400 clamp(26px, 2.2vw, 32px)/1 var(--serif); color: var(--altin-koyu); }
/*  Seçici bilerek ağır: style.css'teki input[type="number"] kuralı
    (çerçeve, yarıçap, dolgu, min-height) aynı özgüllükte ve SONRA
    yükleniyor — hafif bir seçici kaybeder, kutunun içinde ikinci bir
    çerçeve görünürdü.                                                */
.pl .pl-girdi input[type="number"],
.pl .pl-girdi input[type="number"]:hover,
.pl .pl-girdi input[type="number"]:focus {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
  border: 0; border-radius: 0; padding: 0; background: none;
  outline: none; box-shadow: none;
  font: 500 clamp(40px, 4.2vw, 56px)/1 var(--serif);
  color: var(--murekkep);
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-girdi input::-webkit-outer-spin-button,
.pl-girdi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-birim { font-size: 15px; color: var(--soluk); white-space: nowrap; }

/* hazır tutarlar */
.pl-cipler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pl-cip {
  flex: 1 1 auto; min-width: 62px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: 999px;
  background: #fff; cursor: pointer;
  font: 500 14.5px/1 var(--sans); color: var(--metin);
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color .3s, color .3s, background-color .3s, transform .4s var(--yumusak);
}
.pl-cip:hover { border-color: var(--altin); color: var(--altin-koyu); transform: translateY(-1px); }
.pl-cip.secili { border-color: transparent; background: var(--murekkep); color: #FFF8EC; }
.pl-capa-not {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12.5px; letter-spacing: .06em; color: var(--altin-koyu);
}
.pl-capa-not .ik { width: 15px; height: 15px; }

/* ── cetvel: kademeler çentik, tutar işarettir ───────────────────── */
.pl-cetvel { margin: 30px 0 12px; padding-bottom: 26px; }
.pl-cetvel-ray {
  position: relative; height: 4px; border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--cizgi-koyu) 0 1px, transparent 1px 9px) center / 100% 4px no-repeat,
    var(--zemin-3);
}
.pl-cetvel-dolgu {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 999px; background: var(--altin-grad);
  transition: width .5s var(--yumusak);
}
.pl-cetvel-centik { position: absolute; top: -6px; translate: -50% 0; text-align: center; }
[dir="rtl"] .pl-cetvel-centik { translate: 50% 0; }
/*  İlk çentik rayın başındadır: ortalanınca etiketinin yarısı kartın
    dışına taşar. Başa hizalanır, böylece ikinci etiketle de çakışmaz. */
.pl-cetvel-centik:first-of-type { translate: 0 0; text-align: start; }
.pl-cetvel-centik:first-of-type i { margin-inline: 0; }
.pl-cetvel-centik:first-of-type em { left: 0; translate: 0 0; }
[dir="rtl"] .pl-cetvel-centik:first-of-type { translate: 0 0; }
[dir="rtl"] .pl-cetvel-centik:first-of-type em { left: auto; right: 0; }
.pl-cetvel-centik i {
  display: block; width: 1px; height: 16px; margin-inline: auto;
  background: var(--cizgi-koyu);
  transition: background-color .4s;
}
.pl-cetvel-centik em {
  position: absolute; top: 19px; left: 50%; translate: -50% 0;
  font: 500 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--soluk); white-space: nowrap;
  transition: color .4s;
}
.pl-cetvel-centik.gecildi i { background: var(--altin-koyu); }
.pl-cetvel-centik.gecildi em { color: var(--altin-koyu); }
.pl-cetvel-isaret {
  position: absolute; top: 50%; width: 18px; height: 18px; translate: -50% -50%;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--altin);
  box-shadow: 0 4px 12px -4px rgba(135, 96, 42, .7);
  transition: inset-inline-start .5s var(--yumusak);
}
[dir="rtl"] .pl-cetvel-isaret { translate: 50% -50%; }

/* durum satırı: ne açıldı · bir üste ne kaldı */
.pl-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 30px; }
.pl-durum-rozet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--zemin-2); color: var(--altin-koyu);
  font-size: 13px; letter-spacing: .02em;
}
.pl-durum-rozet .ik { width: 15px; height: 15px; }
.pl-durum-rozet strong { color: var(--murekkep); font-weight: 500; }
.pl-durum-sonraki { font-size: 13.5px; color: var(--soluk); }
.pl-durum-sonraki b { color: var(--altin-koyu); font-weight: 500; }

.pl-karsilik {
  margin-top: 6px; height: 0; overflow: hidden; opacity: 0;
  font-size: 13px; color: var(--soluk);
  transition: opacity .4s, height .4s var(--yumusak);
}
.pl-karsilik.gorunur { height: 20px; opacity: 1; }

.pl-not { margin: 14px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--soluk); }
.pl-gonder { width: 100%; margin-top: 20px; }
.pl-zaten {
  margin-top: 12px; padding: 11px 15px; border-radius: 16px;
  background: var(--zemin-2); font-size: 13.5px; line-height: 1.55; color: var(--metin);
}
.pl-kapali {
  margin-top: 6px; padding: 13px 16px; border-radius: 16px;
  background: var(--zemin-2); border: 1px solid var(--cizgi-koyu);
  font-size: 14px; line-height: 1.6;
}
.pl-kilit {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--soluk);
}
.pl-kilit .ik { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--altin); }
.pl-buyuk {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cizgi);
  font-size: 13.5px; line-height: 1.6; color: var(--soluk);
}
.pl-buyuk a { display: inline-flex; align-items: center; gap: 6px; color: var(--altin-koyu); text-decoration: none; white-space: nowrap; }
.pl-buyuk a:hover { color: var(--murekkep); }
.pl-buyuk .ik { width: 14px; height: 14px; }

/* ── 2 · destek nereye gidiyor ────────────────────────────────────── */

.pl-etki { padding-block: clamp(64px, 7.5vw, 116px); }
.pl-etki .bolum-bas { grid-template-columns: 1fr; margin-bottom: clamp(40px, 5vw, 64px); }
.pl-etki-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.pl-etki-kart {
  display: grid; align-content: start; gap: 14px;
  padding: clamp(28px, 2.8vw, 40px);
  border: 1px solid var(--cizgi); border-radius: var(--pl-kart);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .45s, transform .6s var(--yumusak), box-shadow .6s var(--yumusak);
}
.pl-etki-kart:hover { border-color: var(--cizgi-koyu); transform: translateY(-3px); box-shadow: var(--golge-1); }
.pl-etki-ikon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 4px;
  border-radius: 50%; background: var(--zemin-2); color: var(--altin);
}
.pl-etki-ikon .ik { width: 26px; height: 26px; }
.pl-etki-kart h3 { font-size: clamp(24px, 2vw, 29px); line-height: 1.1; }
.pl-etki-kart p { font-size: 15.5px; font-weight: 300; line-height: 1.7; }

/* ── 3 · kademe merdiveni ────────────────────────────────────────── */

.pl-kademeler {
  padding-block: clamp(64px, 7.5vw, 112px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
  border-block: 1px solid var(--cizgi);
}
.pl-kademe-izgara {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px); align-items: stretch;
}
.pl-kademe {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px);
  border: 1px solid var(--cizgi-koyu); border-radius: var(--pl-kart);
  background: rgba(255, 255, 255, .55);
  transition: background-color .45s, border-color .45s, box-shadow .6s var(--yumusak), transform .6s var(--yumusak);
}
.pl-kademe.acik { background: #fff; border-color: var(--altin-acik); box-shadow: var(--golge-1); }
.pl-kademe.vurgu { background: #fff; border-color: transparent; box-shadow: var(--golge-2); }
.pl-kademe.vurgu::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: var(--altin-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pl-kademe-rozet {
  position: absolute; top: -11px; inset-inline-start: clamp(26px, 2.4vw, 34px);
  padding: 6px 13px; border-radius: 999px;
  background: var(--altin-grad); color: #FFFBF2;
  font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(135, 96, 42, .9);
}
.pl-kademe-tur {
  display: flex; align-items: center; gap: 6px; min-height: 15px; margin-bottom: 9px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--altin-koyu); opacity: 0;
  transition: opacity .4s var(--yumusak);
}
.pl-kademe-tur .ik { width: 13px; height: 13px; stroke-width: 2.4; }
/*  Etiket yalnız kademe AÇIKKEN görünür; ücretsiz kart her zaman açıktır.
    Kapalı kartta boş kalır — yer tutar, düzen zıplamaz.               */
.pl-kademe.acik .pl-kademe-tur { opacity: 1; }
.pl-kademe h3 { font-size: clamp(25px, 2.1vw, 31px); line-height: 1.08; }
.pl-kademe-esik { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 20px; }
.pl-kademe-esik strong {
  font: 500 clamp(34px, 3.2vw, 44px)/1 var(--serif); color: var(--murekkep);
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-kademe-esik .pl-arti { font-size: .6em; color: var(--altin-koyu); vertical-align: .35em; }
.pl-kademe-esik span { font-size: 14px; color: var(--soluk); }
.pl-kademe ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.pl-kademe li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.pl-kademe li .ik { width: 17px; height: 17px; margin-top: 2px; flex: none; color: var(--altin-acik); stroke-width: 2; transition: color .4s; }
.pl-kademe.acik li .ik { color: var(--altin); }
.pl-kademe-sec {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 18px;
  border: 1px solid var(--cizgi-koyu); border-radius: 999px;
  background: transparent; cursor: pointer; text-decoration: none;
  font: 500 14px/1 var(--sans); color: var(--murekkep);
  transition: border-color .3s, background-color .3s, color .3s;
}
.pl-kademe-sec .ik { width: 16px; height: 16px; transition: transform .5s var(--yumusak); }
.pl-kademe-sec:hover { border-color: var(--altin); color: var(--altin-koyu); background: var(--zemin-2); }
.pl-kademe-sec:hover .ik { transform: translateX(3px); }
[dir="rtl"] .pl-kademe-sec:hover .ik { transform: translateX(-3px); }
.pl-kademe.vurgu .pl-kademe-sec { border-color: transparent; background: var(--altin-grad); color: #FFFBF2; }
.pl-kademe.vurgu .pl-kademe-sec:hover { filter: brightness(1.06); }

/* güvence şeridi */
.pl-guven {
  list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(20px, 3vw, 40px);
}
.pl-guven li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--metin); }
.pl-guven .ik { width: 17px; height: 17px; color: var(--altin); stroke-width: 2; }
.pl-odeyemiyorum { margin-top: 26px; text-align: center; }

/* ── 4 · ortaklık ────────────────────────────────────────────────── */

.pl-ortak { padding-block: clamp(64px, 7.5vw, 112px); }
.pl-ortak-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 4vw, 72px);
  padding: clamp(36px, 4vw, 66px);
  border-radius: clamp(30px, 3vw, 42px);
  background: linear-gradient(135deg, #241B10 0%, #3A2C19 55%, #241B10 100%);
  color: #F3E7D2;
}
.pl-ortak-panel::before {         /* varak ışık süzülmesi */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 88% 18%, rgba(233, 207, 154, .22), transparent 62%);
  pointer-events: none;
}
.pl-ortak-metin { position: relative; }
.pl-ortak-metin .ust-baslik { color: var(--altin-parlak); margin-bottom: 20px; }
.pl-ortak-metin .olcek { filter: brightness(1.7); }
.pl-ortak-metin h2 { color: #FFF8EC; margin-bottom: 18px; }
.pl-ortak-metin h2 em {
  background: linear-gradient(115deg, #E9CF9A 0%, #F6E7C4 50%, #D8B87C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-ortak-metin p { max-width: 46ch; font-size: 16.5px; font-weight: 300; line-height: 1.75; color: #E3D4B8; }
.pl-ortak-metin .dugme {
  margin-top: 28px;
  color: #FFF8EC; border-color: rgba(233, 207, 154, .5); background: rgba(255, 255, 255, .06);
}
.pl-ortak-metin .dugme:hover { border-color: var(--altin-parlak); background: rgba(255, 255, 255, .12); color: #fff; }

/* yayılma sahnesi: bir oynat düğmesi ve ondan açılan halkalar */
.pl-ortak-sahne { position: relative; display: grid; place-items: center; min-height: 190px; }
.pl-yayin-cerceve {
  position: relative; z-index: 2;
  width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--altin-grad); color: #2A1F12;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .8);
}
.pl-yayin-cerceve .ik { width: 32px; height: 32px; stroke-width: 1.6; margin-inline-start: 3px; }
.pl-yayin-halka {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(233, 207, 154, .35);
  animation: pl-yayil 4.5s var(--yumusak) infinite;
}
.pl-yayin-halka-2 { animation-delay: 1.5s; }
@keyframes pl-yayil {
  0%   { transform: scale(.62); opacity: .9; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* ── 5 · SSS ─────────────────────────────────────────────────────── */

.pl-sss { padding-block: clamp(56px, 6.5vw, 100px); border-top: 1px solid var(--cizgi); }
.pl-sss-ic { max-width: 760px; }
.pl-sss-ic h2 { text-align: center; margin-bottom: clamp(28px, 3.5vw, 48px); }
.pl-sss-oge { border-bottom: 1px solid var(--cizgi); }
.pl-sss-oge summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font: 500 clamp(17px, 1.35vw, 19.5px)/1.4 var(--sans); color: var(--murekkep);
  transition: color .3s;
}
.pl-sss-oge summary::-webkit-details-marker { display: none; }
.pl-sss-oge summary:hover { color: var(--altin-koyu); }
.pl-sss-oge summary i {
  position: relative; width: 15px; height: 15px; flex: none;
}
.pl-sss-oge summary i::before, .pl-sss-oge summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; border-radius: 2px;
  background: var(--altin);
  transition: transform .45s var(--yumusak), opacity .3s;
}
/*  Dönüşü ayrı 'rotate' özelliğiyle değil transform içinde veriyoruz:
    ikisi birden kullanılınca kapanış çarpanı beklenen eksende
    uygulanmıyor ve açık durumda artı işareti eksiye dönmüyordu.    */
.pl-sss-oge summary i::after { transform: translateY(-50%) rotate(90deg); inset: 50% 0 auto; translate: none; }
.pl-sss-oge summary i::before { transform: translateY(-50%); translate: none; }
.pl-sss-oge[open] summary i::after { transform: translateY(-50%) rotate(90deg) scaleX(0); opacity: 0; }
.pl-sss-oge[open] summary { color: var(--altin-koyu); }
.pl-sss-oge p {
  padding: 0 4px 24px; max-width: 62ch;
  font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--metin);
}

/* ── 6 · kapanış ─────────────────────────────────────────────────── */

.pl-son {
  padding-block: clamp(64px, 8vw, 120px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
  border-top: 1px solid var(--cizgi);
}
.pl-son-ic { max-width: 720px; margin-inline: auto; text-align: center; }
.pl-son-ic h2 { font-size: clamp(36px, 4.4vw, 62px); }
.pl-son-ic > p { margin: 22px auto 0; max-width: 46ch; font-size: 17px; font-weight: 300; line-height: 1.75; }
.pl-son-dugmeler {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 32px; margin-top: 36px;
}

/* ── hero filigranı: eş merkezli ölçü halkaları ──────────────────────
   Sayfanın ilk ekranı ana sayfa kadar "derin" görünsün diye zeminde
   çok soluk bir cetvel deseni döner. inset:0 — taşmadığı için ne yatay
   kaydırma ne de .pl-arac'ın yapışkanlığını bozan overflow gerekir.  */
.pl-bas::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 18% 34%, rgba(168, 123, 61, .085) 0 1px, transparent 1px 44px);
  -webkit-mask: radial-gradient(58% 76% at 18% 34%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
          mask: radial-gradient(58% 76% at 18% 34%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
}
[dir="rtl"] .pl-bas::before {
  background: repeating-radial-gradient(circle at 82% 34%, rgba(168, 123, 61, .085) 0 1px, transparent 1px 44px);
  -webkit-mask: radial-gradient(58% 76% at 82% 34%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
          mask: radial-gradient(58% 76% at 82% 34%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 78%);
}

/* ── ayet üçlüsü: hero'nun altındaki boşluk ──────────────────────────
   Sağdaki yapışkan tutar kutusu sol sütundan uzundur; kanıt şeridinin
   altında kalan boşluğa üç gelenekten üç çağrı oturur. Kart değil,
   editoryal künye satırları: sütunun ritmini bozmadan doldurur.      */

.pl-ayet { margin-top: clamp(30px, 3.6vw, 50px); max-width: 46rem; }
.pl .pl-ayet-ust { margin-bottom: 14px; }
.pl-ayet ul { list-style: none; margin: 0; padding: 0; }
.pl-ayet li { padding-block: clamp(15px, 1.7vw, 21px); border-top: 1px solid var(--cizgi); }
.pl-ayet li:last-child { border-bottom: 1px solid var(--cizgi); }
.pl-ayet figure {
  margin: 0; display: grid; align-items: baseline;
  grid-template-columns: minmax(74px, 92px) minmax(0, 1fr);
  gap: 7px clamp(16px, 1.8vw, 26px);
}
.pl-ayet-gelenek {
  grid-row: 1 / 3;
  font: 500 11.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--altin-koyu);
}
.pl-ayet blockquote {
  margin: 0;
  font: italic 400 clamp(16.5px, 1.4vw, 20px)/1.52 var(--serif);
  color: var(--murekkep); text-wrap: pretty;
}
.pl-tirnak { font-style: normal; color: var(--altin-acik); }
.pl-ayet figcaption {
  grid-column: 2;
  font: 400 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soluk);
}

/* ── 1 · yayılma zinciri — sayfanın açılış perdesi ────────────────────
   Tam genişlikte karanlık bir perde; üstünde İKİ SÜTUN.

     ┌──────────────────────┬─────────────────────────────┐
     │ üst başlık           │                             │
     │ MANŞET               │        ·  S A H N E  ·      │
     │ giriş                │      (tamamı görünür)       │
     │ imza cümlesi         ├─────────────────────────────┤
     │ [ düğme ]            │ 01 …    02 …    03 …        │  ← cetvel
     └──────────────────────┴─────────────────────────────┘

   Eski kurgu sahneyi arka plana yatırıp 'slice' ile kırpıyor, üstüne de
   tül seriyordu: dünyanın kenarı yoktu. Sahne artık kendi kutusunda ve
   kırpılmıyor; tül yerini, metnin arkasını değil KUTUNUN KENARLARINI
   koyulaştıran bir vinyete bıraktı. Üç halka etiketi sol sütundan
   alınıp sahnenin altındaki cetvele taşındı — orada madde değil,
   dünyanın altyazısı oluyorlar.

   Hareketin koreografisi (9 sn'lik döngü) ve kıvılcım/nabız kuralları
   aşağıda, .pl-z-* bloğunda.                                          */

.pl-zincir {
  --dongu: 9s;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-items: center;
  /*  İç sayfalarda üst çubuk .ust-kati'dir: opak ve 72px. main.genis'in
      72px üst dolgusu tam onu karşıladığı için perde kendiliğinden
      çubuğun altından başlar — negatif kenar boşluğuna gerek yok.   */
  min-height: min(88vh, 860px);
  /*  Zemin üç katman: grenli doku, sahnenin arkasından yükselen sıcak
      ışık ve altta düz degrade. Doku olmadan koyu degrade dijital ve
      ucuz görünüyor — siteyi materyal yapan şey o gren.             */
  background:
    var(--doku),
    radial-gradient(72% 76% at 74% 48%, rgba(126, 91, 36, .34) 0%, rgba(56, 40, 17, .16) 46%, transparent 70%),
    linear-gradient(152deg, #140F08 0%, #271C0E 48%, #120D06 100%);
  color: #EFE2CC;
}
/* üst çubukla perde arasında ince bir varak sınır */
.pl-zincir::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(233, 207, 154, .34) 24%, rgba(233, 207, 154, .5) 50%, rgba(233, 207, 154, .34) 76%, transparent);
}
/*  Vinyet: yön taşımaz, bu yüzden RTL'de ayrıca çevrilecek bir şeyi
    yoktur. (Eski soldan sağa tül için ayrı bir [dir=rtl] kuralı
    gerekiyordu; kompozisyon simetrikleşince o kural da düştü.)     */
.pl-zincir-perde {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(118% 86% at 50% 48%, transparent 40%, rgba(11, 8, 4, .52) 100%),
    linear-gradient(0deg, rgba(17, 12, 6, .72) 0%, transparent 30%);
}

.pl-zincir-ic {
  position: relative; z-index: 2; width: 100%;
  display: grid;
  /*  Sağ sütun bilerek geniş: sahne sayfanın ilk görsel iddiasıdır.
      minmax(0,…) olmadan SVG'nin iç genişliği sütunu şişirir.      */
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 72px);
  /*  Alt dolgu üsttekinden fazla: kaydırma oku oraya oturuyor.     */
  padding-block: clamp(48px, 6vw, 92px) clamp(60px, 7vw, 108px);
}
.pl-zincir-soz { max-width: 33rem; }
.pl-zincir-soz .ust-baslik { color: var(--altin-parlak); margin-bottom: clamp(18px, 1.8vw, 26px); }
.pl-zincir-soz .olcek { filter: brightness(1.75); }

.pl-zincir-baslik {
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  font: 500 clamp(40px, 4.6vw, 70px)/1.02 var(--serif);
  letter-spacing: -.022em; color: #FFF8EC; text-wrap: balance;
}
.pl-zincir-baslik em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(115deg, #E9CF9A 0%, #F6E7C4 50%, #D8B87C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl .pl-zincir-giris {
  max-width: 29em; margin-bottom: clamp(24px, 2.4vw, 32px);
  font-size: clamp(15.5px, 1.2vw, 17.5px); font-weight: 300; line-height: 1.78; color: #CBB99B;
}

/*  Sayfadaki tek doğrudan hitap. Üstündeki varak çizgi onu bir imza
    gibi ayırır.                                                      */
.pl .pl-zincir-cagri {
  max-width: 22em; margin: 0 0 clamp(26px, 2.8vw, 36px);
  font: italic 400 clamp(19px, 1.7vw, 25px)/1.38 var(--serif);
  color: #FFF8EC; text-wrap: balance;
}
.pl .pl-zincir-cagri::before {
  content: ""; display: block; width: 58px; height: 1px; margin-bottom: clamp(18px, 2vw, 26px);
  background: linear-gradient(90deg, var(--altin-acik), transparent);
}
[dir="rtl"] .pl .pl-zincir-cagri::before { background: linear-gradient(-90deg, var(--altin-acik), transparent); }

.pl-zincir-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* ── sağ sütun: sahne + altındaki cetvel ──────────────────────────── */

.pl-zincir-yan { position: relative; z-index: 2; display: grid; gap: clamp(16px, 1.8vw, 26px); }

/*  Kutu sahnenin kendi oranını taşır (800/424) ve SVG 'meet' ile
    içine oturur: hiçbir kenarı kırpılmaz. Kutu bilerek kabın sağ
    boşluğuna biraz taşar — dünya sayfanın kenarına yaklaşır, ama
    kırpılmadığı için tamamı görünür kalır.                        */
.pl-zincir-sahne {
  position: relative;
  aspect-ratio: 800 / 424;
  margin-inline-end: calc(var(--bosluk-x) * -.45);
}
/* sahnenin arkasındaki sıcak hale: dünya boşlukta değil, ışıkta durur */
.pl-zincir-sahne::before {
  content: ""; position: absolute; inset: -14% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 60% at 50% 50%, rgba(255, 224, 166, .15) 0%, rgba(206, 158, 86, .06) 46%, transparent 74%);
}
.pl-z-sahne { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

/*  Üç halka etiketi bir ÖLÇÜ CETVELİDİR: sürekli ince çizgi, altında
    ince çentikler, her maddenin başında uzun bir ana çentik. Sitenin
    imzası olan cetvel motifi ilk ekranda burada beliriyor.          */
.pl-zincir-halkalar {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 28px);
  border-top: 1px solid rgba(233, 207, 154, .22);
  margin-inline-end: calc(var(--bosluk-x) * -.45);
}
.pl-zincir-halkalar::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(233, 207, 154, .26) 0 1px, transparent 1px 11px);
}
.pl-zincir-halkalar li {
  position: relative;
  padding-top: clamp(15px, 1.6vw, 21px);
  display: grid; gap: 7px; align-content: start;
}
.pl-zincir-halkalar li::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 1px; height: 12px; background: var(--altin-acik);
}
.pl-halka-no {
  font: 500 12.5px/1 var(--sans); letter-spacing: .2em; color: #F2DCAE;
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-halka-ad {
  font: 400 clamp(13.5px, 1.05vw, 15.5px)/1.42 var(--sans);
  color: #D6C4A6; text-wrap: pretty; transition: color .3s;
}
.pl-zincir-halkalar li:hover .pl-halka-ad { color: #FFF8EC; }

/*  Altyazı ile dünya arasındaki bağ: bir maddenin üstüne gelince
    ANLATTIĞI HALKA yanar. Böylece cetvel bir süs değil, sahnenin
    okuma anahtarı olur.

    Yanma OPAKLIKLA değil renk + drop-shadow ile yapılıyor: insanların
    opaklığı 9 sn'lik döngüyü süren animasyonun elinde, oraya dokunmak
    koreografiyi bozardı.                                            */
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(1):hover) .pl-z-merkez,
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(2):hover) .pl-z-kisi.k1,
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(3):hover) .pl-z-kisi.k2 {
  filter: drop-shadow(0 0 7px rgba(255, 226, 160, .9));
}
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(2):hover) .k1 .pl-z-bas,
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(3):hover) .k2 .pl-z-bas { fill: #FFF8EC; }
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(2):hover) .k1 .pl-z-govde,
.pl-zincir-yan:has(.pl-zincir-halkalar li:nth-child(3):hover) .k2 .pl-z-govde { stroke: #FFF8EC; }

/* açılışta beliren metin — ana sayfanın hero'suyla aynı eğri */
.pl-gel { animation: pl-hafif-gel 1.3s var(--yumusak) both; animation-delay: calc(.3s + var(--s) * .1s); }
@keyframes pl-hafif-gel { from { opacity: 0; transform: translateY(16px); } }

/*  Kaydırma imi: kutulu fare değil, ışığın aşağı aktığı ince bir
    varak çizgi. Tıklama alanı çizgiden geniş tutuldu.              */
.pl-zincir-kaydir {
  --kay: 52px;
  position: absolute; z-index: 3; bottom: clamp(18px, 2.2vw, 32px); left: 50%; translate: -50% 0;
  width: 28px; height: var(--kay); border-radius: 999px;
}
.pl-zincir-kaydir::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; margin-left: -.5px;
  background: linear-gradient(180deg, rgba(233, 207, 154, .04), rgba(233, 207, 154, .4) 34%, rgba(233, 207, 154, .04));
}
.pl-zincir-kaydir span {
  position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--altin-parlak);
  box-shadow: 0 0 10px rgba(233, 207, 154, .75);
  animation: pl-kaydir 2.4s var(--yumusak) infinite;
}
@keyframes pl-kaydir {
  0%   { opacity: 0; transform: translateY(0); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--kay)); }
}

/* saha: daire çizilip tek scale() ile eziliyor — kalınlıklar korunur */
.pl-z-saha * { vector-effect: non-scaling-stroke; }
.pl-z-cember { fill: none; stroke: rgba(233, 207, 154, .2); stroke-width: 1; }
.pl-z-sinir  { stroke: rgba(233, 207, 154, .5); }   /* cetvelin oturduğu kenar */
.pl-z-ufuk   { stroke: rgba(233, 207, 154, .11); }   /* en dıştaki atmosfer */
.pl-z-isin   { stroke: rgba(233, 207, 154, .11); stroke-width: 1; }
.pl-z-cetvel line { stroke: rgba(233, 207, 154, .28); stroke-width: 1; }
.pl-z-cetvel .pl-z-ara { stroke: rgba(233, 207, 154, .48); }
.pl-z-cetvel .pl-z-ana { stroke: rgba(233, 207, 154, .74); }
.pl-z-cetvel { animation: pl-z-don 300s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pl-z-don { to { transform: rotate(360deg); } }

/* yollar: sönük taban hep durur, kıvılcım üstünden geçer */
.pl-z-iz { fill: none; stroke: rgba(233, 207, 154, .36); stroke-width: 1; }
/* merkezdeki ışık: zincirin başladığı yer nefes alır */
.pl-z-cekirdek { transform-box: fill-box; transform-origin: center; animation: pl-z-nefes 6s ease-in-out infinite; }
@keyframes pl-z-nefes { 50% { transform: scale(1.22); opacity: .8; } }
.pl-z-kivilcim {
  fill: none; stroke: #FFF4D8; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: .12 1; stroke-dashoffset: .12; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 226, 160, .9));
  animation-duration: var(--dongu); animation-timing-function: linear; animation-iteration-count: infinite;
}
.pl-z-kivilcim.g1 { animation-name: pl-z-akis-1; animation-delay: calc(var(--i) * .04s); }
.pl-z-kivilcim.g2 { animation-name: pl-z-akis-2; animation-delay: calc(var(--i) * .03s); }
.pl-z-kivilcim.g3 { animation-name: pl-z-akis-3; animation-delay: calc(var(--i) * .07s); }
@keyframes pl-z-akis-1 {
  0%        { stroke-dashoffset: .12; opacity: 0; }
  2%        { opacity: 1; }
  16%       { opacity: 1; }
  19%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes pl-z-akis-2 {
  0%, 22%   { stroke-dashoffset: .12; opacity: 0; }
  25%       { opacity: 1; }
  41%       { opacity: 1; }
  45%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes pl-z-akis-3 {
  0%, 50%   { stroke-dashoffset: .12; opacity: 0; }
  54%       { opacity: .85; }
  72%       { opacity: .85; }
  77%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

/* insanlar: koyu taban diski yolların üstünden geçmesini engeller */
.pl-z-taban { fill: #241B10; stroke: none; }
.pl-z-bas   { fill: #F0D9A9; stroke: none; }
.pl-z-govde { fill: none; stroke: #F0D9A9; stroke-width: 1.7; stroke-linecap: round; }
.pl-z-nabiz { fill: none; stroke: rgba(233, 207, 154, .6); stroke-width: 1.2; opacity: 0;
              transform-box: fill-box; transform-origin: center; }
.pl-z-kisi  { opacity: .32; transition: filter .4s; }
.pl-z-kisi.k0 { opacity: 1; }
.k0 .pl-z-taban { fill: #1A1309; }
.k0 .pl-z-bas   { fill: #FFF8EC; }
.k0 .pl-z-govde { stroke: #FFF8EC; stroke-width: 1.15; }
.k0 .pl-z-nabiz { stroke-width: .8; }

.pl-z-kisi.k1 { animation: pl-z-yan-1 var(--dongu) linear infinite; animation-delay: calc(var(--i) * .04s); }
.pl-z-kisi.k2 { animation: pl-z-yan-2 var(--dongu) linear infinite; animation-delay: calc(var(--i) * .03s); }
@keyframes pl-z-yan-1 { 0%, 16% { opacity: .32; } 21%, 92% { opacity: 1; } 100% { opacity: .32; } }
@keyframes pl-z-yan-2 { 0%, 42% { opacity: .32; } 47%, 92% { opacity: 1; } 100% { opacity: .32; } }

.k1 .pl-z-nabiz { animation: pl-z-nabiz-1 var(--dongu) ease-out infinite; animation-delay: calc(var(--i) * .04s); }
.k2 .pl-z-nabiz { animation: pl-z-nabiz-2 var(--dongu) ease-out infinite; animation-delay: calc(var(--i) * .03s); }
.k0 .pl-z-nabiz { animation: pl-z-nabiz-0 var(--dongu) ease-out infinite; }
@keyframes pl-z-nabiz-1 { 0%, 17% { transform: scale(.55); opacity: 0; } 21% { opacity: .85; } 36%, 100% { transform: scale(2.7); opacity: 0; } }
@keyframes pl-z-nabiz-2 { 0%, 43% { transform: scale(.55); opacity: 0; } 47% { opacity: .85; } 62%, 100% { transform: scale(2.7); opacity: 0; } }
@keyframes pl-z-nabiz-0 { 0%, 76% { transform: scale(.55); opacity: 0; } 81% { opacity: .9; } 97%, 100% { transform: scale(3); opacity: 0; } }

/* ── 4 · mucizeler ───────────────────────────────────────────────── */

.pl-mucize {
  padding-block: clamp(64px, 7.5vw, 116px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 50%, var(--zemin) 100%);
  border-block: 1px solid var(--cizgi);
}
.pl-mucize .bolum-bas, .pl-emek .bolum-bas { margin-bottom: clamp(36px, 4.4vw, 62px); }
.pl-mucize-izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
}
.pl-mucize-izgara > li { display: grid; }
.pl-mucize-kart {
  display: grid; align-content: start; gap: 9px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--cizgi); border-radius: var(--pl-kart);
  background: #fff;
  transition: transform .5s var(--yumusak), box-shadow .5s var(--yumusak), border-color .4s;
}
.pl-mucize-kart:hover { transform: translateY(-4px); border-color: var(--cizgi-koyu); box-shadow: var(--golge-1); }
.pl-mucize-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pl-mucize-ikon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--zemin-2); color: var(--altin);
}
.pl-mucize-ikon .ik { width: 23px; height: 23px; }
.pl-mucize-no { font: 500 11.5px/1 var(--sans); letter-spacing: .2em; color: var(--soluk); }
.pl-mucize-deger { display: flex; align-items: baseline; gap: 4px; }
.pl-mucize-deger strong {
  font: 500 clamp(30px, 2.9vw, 43px)/1 var(--serif); color: var(--murekkep);
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-mucize-birim { font: 400 clamp(16px, 1.3vw, 20px)/1 var(--serif); color: var(--altin-koyu); }
.pl-mucize-birim.derece { align-self: flex-start; }
.pl-mucize-kart h3 { font-size: clamp(18px, 1.5vw, 21.5px); line-height: 1.24; }
.pl-mucize-not { font-size: 14.5px; font-weight: 300; line-height: 1.68; color: var(--metin); }

/* ── 5 · bugüne dek yapılanlar ───────────────────────────────────── */

.pl-emek { padding-block: clamp(64px, 7.5vw, 116px); }
.pl-emek-yol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px);
}
.pl-emek-yol > li { display: grid; align-content: start; gap: 9px; }
.pl-emek-cizgi { display: block; position: relative; height: 1px; margin-bottom: 9px; background: var(--cizgi-koyu); }
.pl-emek-cizgi i {
  position: absolute; inset-inline-start: 0; top: -4.5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--altin-grad); box-shadow: 0 0 0 4px var(--zemin);
}
.pl-emek-donem {
  font: 500 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--altin-koyu);
}
.pl-emek-yol h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.18; }
.pl-emek-yol p { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--metin); }

.pl-emek-toplam {
  list-style: none; margin: clamp(44px, 5vw, 76px) 0 0;
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 3vw, 48px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px);
  border: 1px solid var(--cizgi); border-radius: var(--pl-kart);
  background: var(--doku), linear-gradient(135deg, var(--zemin-2) 0%, var(--zemin-3) 100%);
}
.pl-emek-toplam li { display: grid; gap: 9px; justify-items: center; text-align: center; }
.pl-emek-toplam li + li { border-inline-start: 1px solid var(--cizgi-koyu); }
.pl-emek-toplam strong {
  font: 500 clamp(36px, 4vw, 58px)/1 var(--serif); color: var(--murekkep);
  font-variant-numeric: lining-nums tabular-nums;
}
.pl-emek-toplam span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }

/* ── duyarlı ─────────────────────────────────────────────────────── */

/*  İki sütun ancak sahneye gerçek bir genişlik kaldığı sürece
    anlamlı; altında sütunlar ÜST ÜSTE yığılıyor — metin, sahne,
    cetvel. Sıralama DOM sırasının aynısı, hiçbir order gerekmiyor.  */
@media (max-width: 980px) {
  .pl-zincir { min-height: 0; }
  .pl-zincir-ic {
    grid-template-columns: 1fr;
    gap: clamp(34px, 5.4vw, 54px);
    padding-block: clamp(44px, 7vw, 72px) clamp(46px, 7vw, 76px);
  }
  .pl-zincir-soz { max-width: none; }
  /*  Tek sütunda ölçü biraz genişler: 44ch'lik bir şerit, 820px'lik
      bir bloğun içinde yarım kalmış gibi duruyordu.              */
  .pl .pl-zincir-giris { max-width: 54ch; }
  .pl .pl-zincir-cagri { max-width: 17em; }
  /*  Taşma masaüstünde kompozisyon içindi; tek sütunda sahne ile
      cetvel kabın kenarına hizalanmalı.                          */
  .pl-zincir-sahne, .pl-zincir-halkalar { margin-inline-end: 0; }
  .pl-zincir-kaydir { display: none; }
}

/*  Üç sütunluk cetvel daralınca kelimeler tek tek satıra düşüyor;
    o noktada cetvel DÜŞEY bir listeye dönüyor: numara solda,
    etiket sağda, aralarında ince ayraçlar.                        */
@media (max-width: 620px) {
  /*  Telefonda dünya zaten küçülüyor; kabın yan boşluğunu da alıp
      kenardan kenara uzanıyor. Cetvel içeride hizalı kalır —
      taşan görsel + içeride altyazı, editoryal bir duruş.      */
  .pl-zincir-sahne { margin-inline: calc(var(--bosluk-x) * -1); }
  .pl-zincir-halkalar { grid-template-columns: 1fr; gap: 0; }
  .pl-zincir-halkalar::before { display: none; }
  .pl-zincir-halkalar li {
    grid-template-columns: auto 1fr; align-items: baseline; gap: 14px;
    padding: 13px 0;
  }
  .pl-zincir-halkalar li + li { border-top: 1px solid rgba(233, 207, 154, .12); }
  .pl-zincir-halkalar li::before { display: none; }
}

@media (max-width: 1080px) {
  .pl-bas-ic { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
  .pl-arac { position: static; max-width: 520px; width: 100%; }
  .pl-kademe-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pl-etki-izgara { grid-template-columns: 1fr; }
  .pl-mucize-izgara, .pl-emek-yol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-ortak-panel { grid-template-columns: 1fr; }
  .pl-ortak-sahne { order: -1; min-height: 150px; }
}

@media (max-width: 720px) {
  .pl-kanit { gap: 16px; }
  .pl-kanit li + li { padding-inline-start: 16px; }
  .pl-kanit strong { font-size: clamp(28px, 8vw, 36px); }
  .pl-kanit span { font-size: 10.5px; letter-spacing: .06em; }
  .pl-kademe-izgara { grid-template-columns: 1fr; }
  .pl-arac { padding: 24px 20px; border-radius: 26px; }
  .pl-cetvel-centik em { font-size: 9.5px; letter-spacing: .06em; }
  .pl-guven { justify-content: flex-start; }
  .pl-son-dugmeler .dugme { width: 100%; }
  .pl-ayet figure { grid-template-columns: 1fr; gap: 5px; }
  .pl-ayet-gelenek { grid-row: auto; }
  .pl-ayet figcaption { grid-column: 1; }
  .pl-mucize-izgara, .pl-emek-yol { grid-template-columns: 1fr; }
  .pl-emek-toplam { grid-template-columns: 1fr; gap: 26px; }
  .pl-emek-toplam li + li { border-inline-start: 0; border-top: 1px solid var(--cizgi-koyu); padding-top: 26px; }
}

@media (max-width: 420px) {
  .pl-kanit { grid-template-columns: 1fr 1fr; }
  .pl-kanit li:first-child { grid-column: 1 / -1; }
  .pl-kanit li:nth-child(2) { padding-inline-start: 0; border-inline-start: 0; }
  .pl-cip { min-width: 54px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-yayin-halka { animation: none; opacity: .25; }
  /*  Sahne hareketsiz de eksiksiz anlatsın: bütün insanlar yanık,
      bütün yollar çizili; yalnız kıvılcım ve nabız susar.          */
  .pl-z-kivilcim, .pl-z-nabiz { display: none; }
  .pl-z-cekirdek { animation: none; }
  .pl-z-kisi, .pl-z-cetvel { animation: none; opacity: 1; }
  /*  Kıvılcım susunca yolları taşıyan tek şey taban izi kalıyor:
      hareketli haldekinden daha parlak çizilir.                */
  .pl-z-iz { stroke: rgba(233, 207, 154, .44); }
}

/* ═══════════════════════════════════════════════════════════════════
   ORTAKLIK  (ortaklik.php)                                  [Faz 26]

   Davet sayfasıdır: ziyaretçi buraya "ne kazanırım" diye gelir, çıkarken
   "ne taşırım" diye çıkmalıdır. Bu yüzden kazanç kalemleri açık ve
   sayılıdır, kurallar saklanmaz, günlük video paketi sayfanın en üstünde
   gerçek bir nesne gibi durur.
   Planlar sayfasının SSS parçaları (.pl-sss*) yeniden kullanılır.
   ═══════════════════════════════════════════════════════════════════ */

.ok h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; }
.ok h3 { font-family: var(--serif); font-weight: 500; color: var(--murekkep); }
.ok p  { margin: 0; }

/* ── onaylı ortağın paneli (tanıtımın üstünde) ───────────────────── */
.ok-panel { padding-block: clamp(28px, 3vw, 44px) clamp(40px, 5vw, 72px); }
.ok-panel .sayfa-baslik { margin-bottom: 24px; }

/* ── 1 · davet ───────────────────────────────────────────────────── */

.ok-bas {
  position: relative;
  padding-block: clamp(48px, 6vw, 100px) clamp(56px, 7vw, 104px);
  background: var(--doku), linear-gradient(165deg, var(--zemin-2) 0%, var(--zemin) 62%);
}
.ok-bas::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cizgi-koyu) 22%, var(--cizgi-koyu) 78%, transparent);
}
/* panelin altına düşen tanıtım: aynı sayfada ikinci bir giriş gibi durmasın */
.ok-bas-ikincil { border-top: 1px solid var(--cizgi); }

.ok-bas-ic {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(40px, 5vw, 80px);
}
.ok-soz h1, .ok-soz h2 {
  margin: 0 0 24px;
  font: 500 clamp(42px, 5.2vw, 76px)/1.02 var(--serif);
  letter-spacing: -.02em; color: var(--murekkep);
}
.ok-soz h1 em, .ok-soz h2 em { font-style: italic; font-weight: 400; }
.ok-giris { max-width: 34em; font-size: clamp(16.5px, 1.2vw, 18.5px); font-weight: 300; line-height: 1.75; }

.ok-cagri { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.ok-cagri-not { font-size: 13.5px; color: var(--soluk); }

.ok-kanit {
  list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 32px); max-width: 40rem;
}
.ok-kanit li { display: grid; align-content: start; gap: 6px; }
.ok-kanit li + li { padding-inline-start: clamp(16px, 2.2vw, 32px); border-inline-start: 1px solid var(--cizgi-koyu); }
.ok-kanit strong {
  font: 500 clamp(32px, 3.4vw, 46px)/1 var(--serif); color: var(--murekkep);
  font-variant-numeric: lining-nums tabular-nums;
}
.ok-kanit span { font-size: 11.5px; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--soluk); }

/* günlük paket sahnesi: üst üste duran üç kare */
.ok-sahne { position: relative; display: grid; place-items: center; min-height: clamp(240px, 26vw, 360px); }
.ok-deste { position: relative; width: clamp(180px, 20vw, 250px); aspect-ratio: 4 / 5; }
.ok-kare {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 26px;
  background: linear-gradient(150deg, #2C2117 0%, #4A3720 100%);
  box-shadow: 0 30px 60px -28px rgba(60, 45, 20, .75);
  transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * -10px));
  transition: transform .8s var(--yumusak);
}
.ok-kare:nth-child(1) { opacity: .55; }
.ok-kare:nth-child(2) { opacity: .78; }
.ok-kare i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--altin-grad); color: #2A1F12; }
.ok-kare:not(:last-child) i { display: none; }
.ok-kare i .ik { width: 26px; height: 26px; stroke-width: 1.7; margin-inline-start: 3px; }
.ok-sahne:hover .ok-kare { transform: rotate(calc((var(--i) - 1) * 11deg)) translateY(calc(var(--i) * -16px)); }
.ok-deste-not {
  position: absolute; bottom: clamp(4px, 2vw, 24px);
  padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--cizgi-koyu);
  font: 500 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--altin-koyu);
  box-shadow: var(--golge-1);
}

/* ── ortak kart parçaları ────────────────────────────────────────── */

.ok-izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); }
.ok-izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.ok-kart, .ok-kazanc-kart {
  position: relative;
  display: grid; align-content: start; gap: 13px;
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--cizgi); border-radius: 30px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .45s, transform .6s var(--yumusak), box-shadow .6s var(--yumusak);
}
.ok-kart:hover, .ok-kazanc-kart:hover { border-color: var(--cizgi-koyu); transform: translateY(-3px); box-shadow: var(--golge-1); }
.ok-kart-ikon {
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 50%; background: var(--zemin-2); color: var(--altin);
}
.ok-kart-ikon .ik { width: 24px; height: 24px; }
.ok-kart h3, .ok-kazanc-kart h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; }
.ok-kart p, .ok-kazanc-kart p { font-size: 15px; font-weight: 300; line-height: 1.7; }

.ok-paket  { padding-block: clamp(64px, 7.5vw, 112px); }
.ok-kazanc {
  padding-block: clamp(64px, 7.5vw, 112px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
  border-block: 1px solid var(--cizgi);
}
.ok-kazanc-no {
  position: absolute; top: clamp(20px, 2vw, 28px); inset-inline-end: clamp(22px, 2.2vw, 30px);
  font: 500 clamp(30px, 3vw, 44px)/1 var(--serif); color: var(--cizgi-koyu);
  font-variant-numeric: lining-nums;
}
.ok-mana {
  margin: clamp(40px, 4.5vw, 64px) auto 0; max-width: 34ch; text-align: center; text-wrap: balance;
  font: 500 clamp(26px, 3vw, 40px)/1.25 var(--serif); color: var(--murekkep);
}
.ok-mana em { font-style: italic; font-weight: 400; background: var(--altin-metin); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; }

/* ── 4 · nasıl işler ─────────────────────────────────────────────── */

.ok-adim { padding-block: clamp(64px, 7.5vw, 112px); }
.ok-adim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: adim; }
.ok-adim-liste li {
  display: grid; grid-template-columns: clamp(66px, 8vw, 120px) minmax(0, 1fr);
  align-items: start; gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--cizgi);
}
.ok-adim-liste li:last-child { border-bottom: 1px solid var(--cizgi); }
.ok-adim-no {
  font: 500 clamp(30px, 3.4vw, 48px)/1 var(--serif); color: var(--altin-acik);
  font-variant-numeric: lining-nums tabular-nums;
}
.ok-adim-liste h3 { font-size: clamp(22px, 2vw, 29px); line-height: 1.15; margin-bottom: 8px; }
.ok-adim-liste p { max-width: 60ch; font-size: 16px; font-weight: 300; line-height: 1.7; }

/* ── 5 · kurallar ────────────────────────────────────────────────── */

.ok-kural { padding-block: clamp(56px, 7vw, 104px); }
.ok-kural-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 72px);
  padding: clamp(34px, 4vw, 64px);
  border-radius: clamp(30px, 3vw, 42px);
  background: linear-gradient(140deg, #221A10 0%, #38291619 0%, #221A10 0%, #3B2C19 60%, #221A10 100%);
  color: #EFE2CC;
}
.ok-kural-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 10% 0%, rgba(233, 207, 154, .18), transparent 60%);
}
.ok-kural-soz { position: relative; }
.ok-kural-soz .ust-baslik { color: var(--altin-parlak); margin-bottom: 18px; }
.ok-kural-soz .olcek { filter: brightness(1.7); }
.ok-kural-soz h2 { color: #FFF8EC; margin-bottom: 16px; }
.ok-kural-soz h2 em {
  background: linear-gradient(115deg, #E9CF9A 0%, #F6E7C4 50%, #D8B87C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ok-kural-soz > p { max-width: 42ch; font-size: 16px; font-weight: 300; line-height: 1.75; color: #DCCCAE; }

.ok-sinir { margin: 28px 0 0; display: grid; gap: 1px; background: rgba(233, 207, 154, .2); border-radius: 16px; overflow: hidden; }
.ok-sinir > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 16px; background: rgba(0, 0, 0, .22);
}
.ok-sinir dt { font-size: 13.5px; color: #C9B693; margin: 0; }
.ok-sinir dd {
  margin: 0; font: 500 17px/1 var(--sans); color: #FFF8EC;
  font-variant-numeric: lining-nums tabular-nums;
}

.ok-kural-liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
.ok-kural-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: #E7DAC3; }
.ok-kural-liste .ik { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--altin-parlak); stroke-width: 2; }

/* ── 6 · başvuru ─────────────────────────────────────────────────── */

.ok-basvuru {
  padding-block: clamp(56px, 7vw, 104px);
  background: var(--doku), linear-gradient(180deg, var(--zemin) 0%, var(--zemin-2) 100%);
  border-top: 1px solid var(--cizgi);
  scroll-margin-top: 92px;
}
.ok-basvuru-ic { max-width: 640px; }
.ok-basvuru-kutu {
  position: relative; isolation: isolate;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: 30px; background: #fff; box-shadow: var(--golge-2);
  text-align: center;
}
.ok-basvuru-kutu::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: var(--altin-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ok-basvuru-kutu h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 14px; }
.ok-basvuru-kutu > p { max-width: 44ch; margin-inline: auto; font-size: 16px; font-weight: 300; line-height: 1.7; }
.ok-basvuru-kutu .dugme { margin-top: 26px; }
.ok-form { margin-top: 26px; text-align: start; }
.ok-form .dugme { width: 100%; margin-top: 4px; }
.ok-giris-alt { margin-top: 16px; font-size: 13.5px; color: var(--soluk); text-align: center; }
.ok-bekliyor .buyuk-ikon { margin-inline: auto; margin-bottom: 12px; }

.ok-sss { background: var(--doku), var(--zemin-2); }

/* ── duyarlı ─────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ok-bas-ic { grid-template-columns: 1fr; }
  .ok-sahne { order: -1; min-height: 220px; }
  .ok-izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ok-kural-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ok-izgara-3 { grid-template-columns: 1fr; }
  .ok-izgara-4 { grid-template-columns: 1fr; }
  .ok-kanit { gap: 14px; }
  .ok-kanit li + li { padding-inline-start: 14px; }
  .ok-kanit strong { font-size: clamp(26px, 8vw, 34px); }
  .ok-kanit span { font-size: 10px; letter-spacing: .06em; }
  .ok-cagri .dugme { width: 100%; }
  .ok-adim-liste li { grid-template-columns: 1fr; gap: 6px; }
  .ok-adim-no { font-size: 26px; }
  .ok-basvuru-kutu { padding: 26px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ok-sahne:hover .ok-kare { transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * -10px)); }
}