/* =====================================================================
   Karakaya Hukuk Bürosu — site.css
   Konsept: "Her ortaklığın bir hukuku vardır."
   Aile (toprak/kiremit) · Şirket (petrol) · Kesişim (pirinç)
   ===================================================================== */

/* ---------- Yazı tipleri (kendi sunucumuzdan) ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tasarım değişkenleri ---------- */
:root {
  --zemin: #f5f1ea;
  --zemin-2: #ece5da;
  --kart: #fbf9f5;
  --murekkep: #12292a;
  --murekkep-2: #2a403f;
  --metin: #2a3332;
  --soluk: #625e57;
  --cizgi: #ddd4c7;

  --aile: #a24e2e;
  --aile-acik: #ecd3c6;
  --aile-zemin: #f5e7de;
  --sirket: #1b4a47;
  --sirket-acik: #c8dcd8;
  --sirket-zemin: #e2edea;
  --kesisim: #a57f2d;
  --kesisim-koyu: #77591a;
  --kesisim-acik: #e9dbb9;
  --kesisim-zemin: #f2ead6;

  --koyu-zemin: #0e2726;
  --petrol: #123f3d;
  --altin: #d2ad62;
  --koyu-metin: #d4cdc1;
  --koyu-soluk: #9d978c;

  --vurgu: var(--murekkep);
  --vurgu-zemin: var(--zemin-2);
  --vurgu-acik: var(--cizgi);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --kap: 1200px;
  --kenar: clamp(18px, 4vw, 32px);
  --yaricap: 18px;
  --golge: 0 1px 2px rgba(18, 41, 42, .04), 0 12px 32px -16px rgba(18, 41, 42, .18);
  --ust-yukseklik: 76px;
  --gecis: cubic-bezier(.2, .7, .2, 1);
}

.tema-aile    { --vurgu: var(--aile);         --vurgu-zemin: var(--aile-zemin);    --vurgu-acik: var(--aile-acik); }
.tema-sirket  { --vurgu: var(--sirket);       --vurgu-zemin: var(--sirket-zemin);  --vurgu-acik: var(--sirket-acik); }
.tema-kesisim { --vurgu: var(--kesisim-koyu); --vurgu-zemin: var(--kesisim-zemin); --vurgu-acik: var(--kesisim-acik); }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yukseklik) + 16px); }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--murekkep); margin: 0; line-height: 1.15; letter-spacing: -0.01em; font-optical-sizing: auto; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
em { font-style: italic; }
button { font: inherit; color: inherit; }
::selection { background: var(--murekkep); color: var(--zemin); }
:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; border-radius: 4px; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--kenar)); margin-inline: auto; padding-inline: var(--kenar); }
.kap--dar { max-width: calc(780px + 2 * var(--kenar)); }

.atla { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--murekkep); color: var(--zemin); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.atla:focus { top: 12px; }

.ikon { width: 20px; height: 20px; flex: none; }

/* ---------- Ortak parçalar ---------- */
.ust-baslik {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--soluk); margin-bottom: 18px;
}
.ust-baslik::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }

.bolum { padding-block: clamp(64px, 8.5vw, 112px); }
.bolum--ilk { padding-top: clamp(40px, 6vw, 72px); }
.bolum__bas { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.bolum__bas--orta { margin-inline: auto; text-align: center; }
.bolum__bas--orta .ust-baslik::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.bolum__bas--yan { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.bolum__baslik { font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem); line-height: 1.07; letter-spacing: -0.018em; }
.bolum__baslik em { color: var(--soluk); }
.bolum__giris { margin-top: 20px; font-size: 1.08rem; color: var(--soluk); }

.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.dugme {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid var(--murekkep);
  background: var(--murekkep); color: var(--zemin);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--gecis);
}
.dugme .ikon { width: 18px; height: 18px; transition: transform .25s var(--gecis); }
.dugme:hover { background: #081a1a; border-color: #081a1a; }
.dugme:hover .ikon { transform: translateX(3px); }
.dugme--cizgi { background: transparent; color: var(--murekkep); border-color: rgba(18, 41, 42, .25); }
.dugme--cizgi:hover { background: rgba(18, 41, 42, .06); border-color: var(--murekkep); }
.dugme--acik { background: var(--zemin); color: var(--murekkep); border-color: var(--zemin); }
.dugme--acik:hover { background: #fff; border-color: #fff; }
.dugme--kucuk { padding: 10px 18px; font-size: 14px; }

.metin-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--murekkep); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.metin-link .ikon { width: 17px; height: 17px; transition: transform .25s var(--gecis); }
.metin-link:hover .ikon { transform: translateX(3px); }

.etiket-hap {
  display: inline-block; align-self: flex-start;
  font: 600 12px/1 var(--sans); letter-spacing: .04em;
  padding: 7px 11px; border-radius: 999px;
  background: var(--zemin-2); color: var(--murekkep-2); text-decoration: none; margin-bottom: 18px;
}
.nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.nokta--aile { background: var(--aile); }
.nokta--sirket { background: var(--sirket); }
.kucuk-not { font-size: 14px; color: var(--soluk); margin-top: 16px; }

/* Kaydırınca beliren öğeler (yalnızca JS açıkken) */
.js .goster { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--gecis), transform .8s var(--gecis); }
.js .goster.gorundu { opacity: 1; transform: none; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--murekkep); }
.logo-isaret { width: 44px; height: auto; overflow: visible; }
.logo-isaret .h-aile, .logo-isaret .h-sirket { fill: none; stroke-width: 2.4; }
.logo__yazi { display: flex; flex-direction: column; line-height: 1; }
.logo__ad { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; }
.logo__alt { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); margin-top: 5px; }

/* Halka çizgi renkleri (logo + büyük çizim) */
.h-aile    { stroke: var(--halka-aile, var(--aile)); }
.h-sirket  { stroke: var(--halka-sirket, var(--sirket)); }

/* ---------- Başlık çubuğu ---------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 241, 234, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.ust--kaydi { border-bottom-color: var(--cizgi); }
.ust__ic { display: flex; align-items: center; gap: 20px; height: var(--ust-yukseklik); }
.ust .logo { margin-right: auto; }
.menu__liste { display: flex; list-style: none; gap: 2px; }
.menu__liste a {
  display: block; padding: 8px 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--murekkep-2); text-decoration: none;
  transition: background .2s, color .2s;
}
.menu__liste a:hover { color: var(--murekkep); background: rgba(18, 41, 42, .05); }
.menu__liste a[aria-current="page"] { color: var(--murekkep); background: var(--zemin-2); }
.menu__alt { display: none; }
.menu-dugme { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cizgi); background: transparent; cursor: pointer; place-items: center; }
.menu-dugme .ikon--kapat { display: none; }

@media (max-width: 1100px) {
  /* backdrop-filter, fixed konumlu menüyü başlığın içine hapseder; mobilde düz zemin */
  .ust { background: var(--zemin); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-dugme { display: grid; }
  .menu {
    position: fixed; inset: var(--ust-yukseklik) 0 0 0; z-index: 49;
    background: var(--zemin); padding: 24px var(--kenar) 32px;
    display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s, transform .3s var(--gecis), visibility 0s .3s;
  }
  .menu-acik .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--gecis); }
  .menu-acik .menu-dugme .ikon--ac { display: none; }
  .menu-acik .menu-dugme .ikon--kapat { display: block; }
  .menu-acik body { overflow: hidden; }
  .menu__liste { flex-direction: column; gap: 0; }
  .menu__liste a { font: 400 clamp(1.7rem, 6vw, 2.2rem)/1.2 var(--serif); color: var(--murekkep); padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--cizgi); }
  .menu__liste a:hover, .menu__liste a[aria-current="page"] { background: none; }
  .menu__liste a[aria-current="page"] { font-style: italic; }
  .menu__alt { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; color: var(--soluk); font-size: 15px; }
  .menu__alt a, .menu__alt span { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
}
@media (max-width: 560px) {
  .ust__randevu { display: none; }
  .logo__ad { font-size: 20px; }
}

/* ---------- Halka çizimi ---------- */
.halka-sahne { margin: 0; }
.halkalar { width: 100%; height: auto; overflow: visible; }
.halkalar .h-aile, .halkalar .h-sirket { fill: none; stroke-width: 13; }
.halkalar .bolge path { fill: transparent; transition: fill .45s var(--gecis); }
.halkalar .bolge--kesisim path { fill: var(--kesisim-acik); fill-opacity: .55; }
.halkalar a.bolge { cursor: pointer; outline: none; }
.halkalar .etiket { font: italic 400 30px var(--serif); text-anchor: middle; transition: opacity .35s; }
.halkalar .etiket--aile { fill: var(--aile); }
.halkalar .etiket--sirket { fill: var(--sirket); }
.halkalar .etiket-kucuk { font: italic 400 15px var(--serif); fill: var(--kesisim-koyu); text-anchor: middle; }
.halkalar .etiketler { pointer-events: none; }

/* Vurgular (fare / klavye ile) */
.halka-sahne[data-vurgu="aile"]    .bolge--aile path    { fill: var(--aile-zemin); }
.halka-sahne[data-vurgu="sirket"]  .bolge--sirket path  { fill: var(--sirket-zemin); }
.halka-sahne[data-vurgu="kesisim"] .bolge--kesisim path { fill: var(--kesisim-acik); fill-opacity: 1; }
.halka-sahne[data-vurgu="aile"]    .etiket--sirket,
.halka-sahne[data-vurgu="sirket"]  .etiket--aile { opacity: .35; }
.halka-sahne[data-vurgu="kesisim"] .etiket { opacity: .45; }
.halkalar a.bolge:focus-visible path { stroke: var(--murekkep); stroke-width: 2; stroke-dasharray: 4 4; }

/* Alan sayfalarında sabit vurgu */
.halkalar--aile .bolge--aile path       { fill: #fff; fill-opacity: .55; }
.halkalar--aile .h-sirket, .halkalar--aile .etiket--sirket { opacity: .28; }
.halkalar--sirket .bolge--sirket path   { fill: #fff; fill-opacity: .55; }
.halkalar--sirket .h-aile, .halkalar--sirket .etiket--aile { opacity: .28; }
.halkalar--kesisim .bolge--kesisim path { fill: var(--kesisim); fill-opacity: .9; }
.halkalar--kesisim .etiket-kucuk { fill: #fff; }
.halkalar--kesisim .etiket { opacity: .5; }

/* Çizilerek gelme */
.js .halkalar .h-aile, .js .halkalar .h-sirket { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: halka-ciz 1.7s var(--gecis) forwards; }
.js .halkalar .h-aile { transform: rotate(180deg); transform-origin: 185px 180px; }
.js .halkalar .h-sirket { animation-delay: .25s; }
.js .halkalar .bolge, .js .halkalar .etiketler { opacity: 0; animation: belir .8s ease 1.1s forwards; }
@keyframes halka-ciz { to { stroke-dashoffset: 0; } }
@keyframes belir { to { opacity: 1; } }

.lejant { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.lejant__oge {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  text-decoration: none; transition: background .3s;
}
.lejant__oge strong { display: block; font-size: 14.5px; color: var(--murekkep); font-weight: 600; }
.lejant__oge small { display: block; font-size: 13px; color: var(--soluk); line-height: 1.45; margin-top: 2px; }
.lejant__nokta { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; }
.lejant__oge--aile .lejant__nokta { background: var(--aile); }
.lejant__oge--sirket .lejant__nokta { background: var(--sirket); }
.lejant__oge--kesisim .lejant__nokta { background: var(--kesisim); }
.lejant__oge--aile:hover, .halka-sahne[data-vurgu="aile"] .lejant__oge--aile { background: var(--aile-zemin); }
.lejant__oge--sirket:hover, .halka-sahne[data-vurgu="sirket"] .lejant__oge--sirket { background: var(--sirket-zemin); }
.lejant__oge--kesisim:hover, .halka-sahne[data-vurgu="kesisim"] .lejant__oge--kesisim { background: var(--kesisim-zemin); }

/* ---------- Kahraman ---------- */
.kahraman { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(64px, 9vw, 112px); }
.kahraman::before {
  content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background:
    radial-gradient(closest-side at 38% 50%, rgba(162, 78, 46, .09), transparent 70%),
    radial-gradient(closest-side at 62% 50%, rgba(27, 74, 71, .09), transparent 70%);
  pointer-events: none;
}
.kahraman__ic { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kahraman__baslik { font-size: clamp(2.9rem, 1.4rem + 5vw, 5.6rem); line-height: 1; letter-spacing: -0.03em; font-weight: 380; }
.kahraman__baslik em {
  font-weight: 400; padding-right: .08em;
  background: linear-gradient(100deg, var(--aile) 8%, var(--kesisim) 52%, var(--sirket) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kahraman__giris { margin-top: 28px; max-width: 54ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--metin); }

/* ---------- Üç evre ---------- */
.evreler { background: var(--kart); }
.serit-secici {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(40px, 5vw, 56px);
  padding: 5px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--zemin);
}
.serit-secici button {
  display: inline-flex; align-items: center; border: 0; background: transparent; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--soluk);
  transition: background .25s, color .25s;
}
.serit-secici button[aria-pressed="true"] { background: var(--murekkep); color: var(--zemin); }
.serit-secici button:not([aria-pressed="true"]):hover { color: var(--murekkep); }

.evre-listesi { list-style: none; position: relative; }
.evre-listesi::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--cizgi); }
.evre { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 36px; align-items: center; padding-block: 18px; position: relative; }
.evre__orta { text-align: center; background: var(--kart); padding: 16px 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.evre__no { font: italic 400 15px/1 var(--serif); color: var(--soluk); }
.evre__ad { font: 400 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1.1 var(--serif); color: var(--murekkep); }
.evre__alt { font-size: 13.5px; color: var(--soluk); }
.evre__serit {
  position: relative; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 26px 28px; transition: opacity .45s, filter .45s, background .45s, border-color .45s;
}
.evre__serit h3 { font-size: 1.32rem; margin: 10px 0 8px; }
.evre__serit p { color: var(--soluk); font-size: 15.5px; }
.evre__serit--aile { text-align: right; }
.evre__serit::after { content: ''; position: absolute; top: 50%; width: 36px; height: 1px; }
.evre__serit--aile::after { right: -37px; background: var(--aile); }
.evre__serit--sirket::after { left: -37px; background: var(--sirket); }
.evre__etiket { font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.evre__serit--aile .evre__etiket { color: var(--aile); }
.evre__serit--sirket .evre__etiket { color: var(--sirket); }

.evre-listesi[data-gorunum="aile"] .evre__serit--aile { background: var(--aile-zemin); border-color: var(--aile-acik); }
.evre-listesi[data-gorunum="sirket"] .evre__serit--sirket { background: var(--sirket-zemin); border-color: var(--sirket-acik); }
.evre-listesi[data-gorunum="aile"] .evre__serit--sirket,
.evre-listesi[data-gorunum="sirket"] .evre__serit--aile { opacity: .3; filter: grayscale(1); }

/* ---------- Çalışma alanı kartları ---------- */
.alan-kartlari { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.alan-karti {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(30px, 4vw, 52px); border-radius: 24px; isolation: isolate;
}
.alan-karti::before {
  content: ''; position: absolute; z-index: -1; width: 340px; height: 340px; right: -120px; bottom: -150px;
  border-radius: 50%; border: 14px solid currentColor; opacity: .07;
}
.alan-karti--aile { background: var(--aile-zemin); color: var(--aile); }
.alan-karti--sirket { background: var(--sirket-zemin); color: var(--sirket); }
.alan-karti__ust { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.alan-karti__baslik { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); margin-top: 16px; }
.alan-karti__manset { font: italic 400 1.2rem/1.45 var(--serif); color: var(--murekkep-2); margin-top: 12px; max-width: 32ch; }
.alan-karti__liste { list-style: none; margin: 28px 0 32px; }
.alan-karti__liste li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--metin); font-size: 15.5px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.alan-karti--aile .alan-karti__liste li { border-top-color: rgba(162, 78, 46, .18); }
.alan-karti--sirket .alan-karti__liste li { border-top-color: rgba(27, 74, 71, .18); }
.alan-karti__liste li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.alan-karti--aile .alan-karti__liste li::before { background: var(--aile); }
.alan-karti--sirket .alan-karti__liste li::before { background: var(--sirket); }
.alan-karti__link { margin-top: auto; align-self: flex-start; }

/* ---------- Kesişim bandı ---------- */
.kesisim-bant {
  background: var(--petrol); color: var(--koyu-metin);
  padding-block: clamp(80px, 10vw, 136px); position: relative; overflow: hidden;
}
.kesisim-bant::before {
  content: ''; position: absolute; left: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(165, 127, 45, .16), transparent);
}
.kesisim-bant__ic { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.kesisim-bant .ust-baslik { color: #d8b768; }
.kesisim-bant .bolum__baslik { color: var(--zemin); font-size: clamp(2rem, 1.3rem + 2vw, 2.8rem); }
.kesisim-bant .bolum__baslik em { color: #e2c57f; }
.kesisim-bant__metin > p:not(.ust-baslik) { margin: 24px 0 36px; font-size: 1.08rem; color: var(--koyu-metin); max-width: 52ch; }
.mercek-ikon { width: 96px; margin-bottom: 28px; }
.mercek-ikon circle { fill: none; stroke: rgba(245, 241, 234, .38); stroke-width: 1.5; }
.mercek-ikon__dolgu { fill: var(--kesisim); }
.kesisim-bant__liste { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 36px; }
.kesisim-bant__liste li { border-top: 1px solid rgba(245, 241, 234, .16); padding-top: 22px; }
.kesisim-bant__no { font: italic 400 15px/1 var(--serif); color: #d8b768; }
.kesisim-bant__liste h3 { color: var(--zemin); font-size: 1.32rem; margin: 12px 0 10px; }
.kesisim-bant__liste p { color: var(--koyu-soluk); font-size: 15.5px; }

/* ---------- Çalışma biçimi ---------- */
.surec-listesi { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 24px; }
.surec-listesi li { position: relative; border-top: 1px solid var(--cizgi); padding-top: 44px; }
.surec__no {
  position: absolute; top: -24px; left: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--zemin); border: 1px solid var(--murekkep);
  font: 400 20px/1 var(--serif); color: var(--murekkep);
}
.surec-listesi h3 { font-size: 1.45rem; margin-bottom: 10px; }
.surec-listesi p { color: var(--soluk); }

/* ---------- Tanıtım / Hakkımda ---------- */
.tanitim { background: var(--kart); }
.tanitim__ic { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.tanitim__ic--sayfa { align-items: start; }
.monogram {
  --halka-aile: #d4825f; --halka-sirket: #7fb3aa;
  position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, #1d4c49 0%, #143a38 55%, #0e2726 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 44px); color: var(--koyu-metin);
}
.monogram::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(245, 241, 234, .12); border-radius: 18px; pointer-events: none; }
.monogram__isaret { position: absolute; top: clamp(28px, 4vw, 44px); left: clamp(28px, 4vw, 44px); width: 92px; height: auto; overflow: visible; }
.monogram__isaret .h-aile, .monogram__isaret .h-sirket { fill: none; stroke-width: 2; }
.monogram__harf { font: italic 300 clamp(5.5rem, 4rem + 5vw, 8.5rem)/.9 var(--serif); color: var(--zemin); letter-spacing: -0.04em; }
.monogram__ad { font: 400 1.35rem/1.2 var(--serif); color: var(--zemin); margin-top: 18px; }
.monogram__baro { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koyu-soluk); margin-top: 10px; }
.portre { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.tanitim__vurgu { font: 400 clamp(1.2rem, 1rem + .7vw, 1.5rem)/1.5 var(--serif); color: var(--murekkep); margin: 22px 0 32px; }
.ilkeler { list-style: none; margin-bottom: 32px; }
.ilkeler li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--cizgi); }
.ilkeler li:last-child { border-bottom: 1px solid var(--cizgi); }
.ilkeler strong { font: 400 1.15rem/1.4 var(--serif); color: var(--murekkep); }
.ilkeler span { color: var(--soluk); font-size: 15.5px; }

.kunye { margin: 28px 0 0; }
.kunye div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.kunye dt { font: 600 11.5px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.kunye dd { margin: 0; font-size: 15.5px; }

.duz-metin p { margin-bottom: 1.15em; }
.duz-metin__giris { font: 400 clamp(1.25rem, 1.05rem + .7vw, 1.55rem)/1.5 var(--serif); color: var(--murekkep); }
.ara-baslik { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); margin: 48px 0 20px; }
.alan-satirlari { list-style: none; }
.alan-satiri {
  display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-top: 1px solid var(--cizgi);
  text-decoration: none; transition: padding .3s var(--gecis), background .3s;
}
.alan-satirlari li:last-child .alan-satiri { border-bottom: 1px solid var(--cizgi); }
.alan-satiri > span:nth-child(2) { flex: 1; }
.alan-satiri strong { display: block; font: 400 1.3rem/1.3 var(--serif); color: var(--murekkep); }
.alan-satiri small { display: block; font-size: 14px; color: var(--soluk); }
.alan-satiri__nokta { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.alan-satiri--aile .alan-satiri__nokta { background: var(--aile); }
.alan-satiri--sirket .alan-satiri__nokta { background: var(--sirket); }
.alan-satiri--kesisim .alan-satiri__nokta { background: var(--kesisim); }
.alan-satiri:hover { padding-left: 14px; }
.alan-satiri .ikon { transition: transform .3s var(--gecis); }
.alan-satiri:hover .ikon { transform: translateX(4px); }

.ilkeler-bolum { background: var(--kart); }
.ilke-kartlari { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ilke-kartlari li { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 32px 28px; }
.ilke__ikon { width: 30px; height: 30px; color: var(--murekkep-2); margin-bottom: 22px; }
.ilke-kartlari h3 { font-size: 1.4rem; margin-bottom: 10px; }
.ilke-kartlari p { color: var(--soluk); font-size: 15.5px; }

/* ---------- Yazı kartları ---------- */
.yazi-kartlari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.yazi-karti {
  position: relative; display: flex; flex-direction: column; min-height: 280px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 30px 28px 26px;
  transition: transform .35s var(--gecis), box-shadow .35s, border-color .35s;
}
.yazi-karti:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: var(--murekkep-2); }
.yazi-karti--aile .etiket-hap, .suzgec--aile[aria-current] { background: var(--aile-zemin); color: var(--aile); }
.yazi-karti--sirket .etiket-hap, .suzgec--sirket[aria-current] { background: var(--sirket-zemin); color: var(--sirket); }
.yazi-karti--kesisim .etiket-hap, .suzgec--kesisim[aria-current] { background: var(--kesisim-zemin); color: var(--kesisim-koyu); }
.yazi-karti__baslik { font-size: 1.38rem; line-height: 1.28; }
.yazi-karti__baslik a { text-decoration: none; }
.yazi-karti__baslik a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.yazi-karti__ozet { color: var(--soluk); font-size: 15.5px; margin: 14px 0 24px; }
.yazi-karti__bilgi { margin-top: auto; font-size: 13.5px; color: var(--soluk); }

.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.suzgec a {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--cizgi);
  font-size: 14.5px; font-weight: 600; color: var(--murekkep-2); text-decoration: none; transition: border-color .2s, background .2s;
}
.suzgec a:hover { border-color: var(--murekkep-2); }
.suzgec a[aria-current] { border-color: transparent; background: var(--murekkep); color: var(--zemin); }
.bos-durum { color: var(--soluk); padding: 40px 0; }

/* ---------- İletişim bandı ---------- */
.iletisim-bant { background: var(--zemin-2); padding-block: clamp(72px, 9vw, 112px); }
.iletisim-bant__ic { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.iletisim-bant__ic > div:first-child > p:last-child { margin-top: 18px; color: var(--soluk); max-width: 48ch; }
.iletisim-bant__yollar { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.iletisim-bant__yol {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; text-decoration: none;
}
a.iletisim-bant__yol:hover { border-color: var(--murekkep-2); }
.iletisim-bant__yol .ikon { width: 22px; height: 22px; color: var(--murekkep-2); }
.iletisim-bant__yol small { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); font-weight: 600; }
.iletisim-bant__yol span { font-weight: 500; color: var(--murekkep); }
.iletisim-bant__yollar .dugme { margin-top: 8px; }

/* ---------- Sayfa başlığı ---------- */
.sayfa-bas { padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--cizgi); }
.sayfa-bas--alan { background: var(--vurgu-zemin); border-bottom: 0; position: relative; overflow: hidden; }
.sayfa-bas--alan .halkalar .bolge--aile path,
.sayfa-bas--alan .halkalar .bolge--sirket path { transition: none; }
.sayfa-bas__ic { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--soluk); margin-bottom: 28px; }
.kirinti a { text-decoration: none; }
.kirinti a:hover { text-decoration: underline; }
.kirinti [aria-current] { color: var(--murekkep-2); }
.sayfa-bas__baslik { font-size: clamp(2.6rem, 1.5rem + 4vw, 4.6rem); line-height: 1.03; letter-spacing: -0.025em; }
.sayfa-bas__baslik em { color: var(--soluk); }
.sayfa-bas__manset { font: italic 400 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.35 var(--serif); color: var(--vurgu); margin-top: 18px; max-width: 30ch; }
.sayfa-bas__giris { margin-top: 22px; font-size: 1.08rem; max-width: 62ch; }
.sayfa-bas--alan .sayfa-bas__ust,
.sayfa-bas--alan .ust-baslik { color: var(--vurgu); }
.bulunamadi { border-bottom: 0; padding-block: clamp(80px, 12vw, 160px); }

/* ---------- Konular ---------- */
.konu-izgara { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.konu { padding: 30px 0 34px; border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; }
.konu__no { font: italic 400 16px/1.6 var(--serif); color: var(--vurgu); grid-row: span 2; }
.konu__baslik { font-size: 1.38rem; margin-bottom: 8px; }
.konu p { color: var(--soluk); font-size: 15.5px; }

/* ---------- SSS ---------- */
.sss-bolum { background: var(--kart); }
.sss-bolum__ic { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.sss-bolum__ic .bolum__bas { position: sticky; top: calc(var(--ust-yukseklik) + 32px); }
.sss { border-bottom: 1px solid var(--cizgi); }
.sss__oge { border-top: 1px solid var(--cizgi); }
.sss__oge summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font: 400 clamp(1.12rem, 1rem + .4vw, 1.3rem)/1.4 var(--serif); color: var(--murekkep);
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__ikon { width: 22px; height: 22px; color: var(--vurgu); transition: transform .3s var(--gecis); }
.sss__oge[open] .sss__ikon { transform: rotate(45deg); }
.sss__yanit { padding: 0 48px 26px 0; color: var(--soluk); }

/* ---------- Diğer alanlar ---------- */
.diger-alanlar { padding-top: 0; }
.diger-alanlar__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.diger-alan {
  display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: var(--yaricap);
  background: var(--kart); border: 1px solid var(--cizgi); text-decoration: none; transition: background .3s, border-color .3s;
}
.diger-alan__metin { flex: 1; }
.diger-alan strong { display: block; font: 400 1.35rem/1.3 var(--serif); color: var(--murekkep); }
.diger-alan small { display: block; font-size: 14px; color: var(--soluk); }
.diger-alan__nokta { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.diger-alan--aile .diger-alan__nokta { background: var(--aile); }
.diger-alan--sirket .diger-alan__nokta { background: var(--sirket); }
.diger-alan--kesisim .diger-alan__nokta { background: var(--kesisim); }
.diger-alan--aile:hover { background: var(--aile-zemin); border-color: var(--aile-acik); }
.diger-alan--sirket:hover { background: var(--sirket-zemin); border-color: var(--sirket-acik); }
.diger-alan--kesisim:hover { background: var(--kesisim-zemin); border-color: var(--kesisim-acik); }
.diger-alan .ikon { transition: transform .3s var(--gecis); }
.diger-alan:hover .ikon { transform: translate(2px, -2px); }

/* ---------- Makale ---------- */
.makale__baslik { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; }
.makale__ozet { font: italic 400 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.5 var(--serif); color: var(--soluk); margin-top: 20px; }
.makale__bilgi { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); }
.makale__bilgi > :first-child { color: var(--murekkep); font-weight: 600; }
.makale .etiket-hap { background: var(--vurgu-zemin); color: var(--vurgu); }
.makale__govde { font-size: 1.08rem; line-height: 1.8; padding-top: 16px; }
.makale__govde h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem); margin: 2.2em 0 .7em; }
.makale__govde ul, .makale__govde ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.makale__govde li { margin-bottom: .55em; padding-left: .2em; }
.makale__govde li::marker { color: var(--vurgu); }
.makale__govde strong { color: var(--murekkep); font-weight: 650; }
.makale__not { margin-top: 48px; padding: 22px 26px; border-radius: 14px; background: var(--vurgu-zemin); border-left: 3px solid var(--vurgu); font-size: 15px; color: var(--metin); }
.makale__cagri { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin: 40px 0 clamp(72px, 9vw, 112px); padding-top: 32px; border-top: 1px solid var(--cizgi); }
.makale__cagri p { font: italic 400 1.25rem/1.4 var(--serif); color: var(--murekkep); }
.makale + .yazilar-bolum { background: var(--kart); }

/* ---------- İletişim sayfası ---------- */
.iletisim__ic { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.bilgi-listesi { list-style: none; margin-bottom: 32px; }
.bilgi-listesi li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--cizgi); }
.bilgi-listesi li:last-child { border-bottom: 1px solid var(--cizgi); }
.bilgi-listesi li > .ikon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--kart); border: 1px solid var(--cizgi); color: var(--murekkep-2); }
.bilgi-listesi li > div { display: flex; flex-direction: column; align-items: flex-start; }
.bilgi-listesi small { display: block; font: 600 11.5px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.bilgi-listesi a:not(.metin-link), .bilgi-listesi span { font-size: 1.05rem; color: var(--murekkep); text-decoration: none; }
.bilgi-listesi .metin-link { margin-top: 10px; font-size: 14px; }
.harita { position: relative; aspect-ratio: 4 / 3; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi);
  background: var(--zemin-2) repeating-linear-gradient(45deg, transparent 0 22px, rgba(18, 41, 42, .03) 22px 23px); }
.harita__kapak { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.harita__kapak .ikon { width: 34px; height: 34px; color: var(--murekkep-2); }
.harita__kapak p { font-size: 14px; color: var(--soluk); max-width: 34ch; }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.iletisim__form { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 24px; padding: clamp(24px, 4vw, 44px); }
.iletisim__form .ara-baslik { margin-top: 0; margin-bottom: 8px; }
.iletisim__form > .kucuk-not { margin: 0 0 28px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.form__satir--ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { display: flex; flex-direction: column; gap: 7px; }
.alan__etiket { font-size: 14px; font-weight: 600; color: var(--murekkep-2); }
.alan__etiket b, .onay b { color: var(--aile); font-weight: 600; }
.alan input, .alan select, .alan textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--murekkep);
  padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fffdf9;
  transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.alan select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3946' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.alan textarea { resize: vertical; min-height: 130px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--murekkep); box-shadow: 0 0 0 3px rgba(18, 41, 42, .1); }
.alan--hata input, .alan--hata select, .alan--hata textarea { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.alan__hata { font-size: 13px; color: #b42318; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--metin); cursor: pointer; }
.onay input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--murekkep); flex: none; }
.onay a { color: var(--murekkep); font-weight: 600; }
.onay--hata { color: #b42318; }
.gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__gonder { align-self: flex-start; margin-top: 6px; }
.form__gonder[aria-busy="true"] { opacity: .65; pointer-events: none; }
.form-sonuc { padding: 15px 18px; border-radius: 12px; font-size: 15px; margin-bottom: 22px; border: 1px solid; }
.form-sonuc[data-tur="ok"] { background: #e8f2ea; color: #1d5235; border-color: #bcd9c4; }
.form-sonuc[data-tur="hata"] { background: #fbecea; color: #8a1f1f; border-color: #efc5c0; }

/* ---------- Altbilgi ---------- */
.alt {
  --halka-aile: #d4825f; --halka-sirket: #7fb3aa;
  background: var(--koyu-zemin); color: var(--koyu-metin); padding-top: clamp(64px, 8vw, 96px); font-size: 15px;
}
.alt a { text-decoration: none; }
.alt a:hover { color: var(--zemin); }
.alt__ust { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 56px; }
.logo--acik { color: var(--zemin); }
.logo--acik .logo__alt { color: var(--koyu-soluk); }
.alt__slogan { font: italic 300 1.55rem/1.3 var(--serif); color: var(--zemin); margin-top: 28px; max-width: 16ch; }
.alt__slogan em { color: #e2c57f; }
.alt__baslik { font: 700 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--koyu-soluk); margin-bottom: 20px; }
.alt__sutun ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.alt__iletisim li { display: flex; gap: 12px; align-items: flex-start; }
.alt__iletisim .ikon { width: 18px; height: 18px; margin-top: 3px; color: var(--koyu-soluk); }
.alt__sosyal { display: flex; gap: 10px; margin-top: 20px; }
.alt__sosyal a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(245, 241, 234, .18); }
.alt__yasal { border-top: 1px solid rgba(245, 241, 234, .1); padding: 28px 0 40px; font-size: 13px; color: var(--koyu-soluk); display: grid; gap: 10px; }
.alt__yasal p:first-child { max-width: 90ch; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1024px) {
  .kesisim-bant__ic, .sss-bolum__ic { grid-template-columns: 1fr; }
  .sss-bolum__ic .bolum__bas { position: static; }
  .alt__ust { grid-template-columns: 1fr 1fr; }
  .yazi-kartlari { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .kahraman__ic, .sayfa-bas__ic, .tanitim__ic, .iletisim__ic, .iletisim-bant__ic { grid-template-columns: 1fr; }
  .kahraman__gorsel { max-width: 560px; width: 100%; margin-inline: auto; }
  .sayfa-bas__gorsel { max-width: 380px; width: 100%; }
  .tanitim__gorsel { max-width: 420px; }
  .alan-kartlari, .konu-izgara, .diger-alanlar__liste { grid-template-columns: 1fr; }
  .surec-listesi, .ilke-kartlari { grid-template-columns: 1fr; gap: 48px; }
  .ilke-kartlari { gap: 16px; }

  /* Üç evre: tek sütun; seçici şeritleri gizler */
  .evre-listesi::before { display: none; }
  .evre { grid-template-columns: 1fr; gap: 12px; padding-block: 0 36px; }
  .evre__orta { order: -1; flex-direction: row; align-items: baseline; gap: 12px; text-align: left; background: none; padding: 0 0 4px; }
  .evre__serit--aile { text-align: left; }
  .evre__serit::after { display: none; }
  .evre-listesi[data-gorunum="aile"] .evre__serit--sirket,
  .evre-listesi[data-gorunum="sirket"] .evre__serit--aile { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .lejant { grid-template-columns: 1fr; gap: 2px; }
  .yazi-kartlari, .kesisim-bant__liste, .form__satir--ikili, .alt__ust { grid-template-columns: 1fr; }
  .ilkeler li, .kunye div { grid-template-columns: 1fr; gap: 4px; }
  .sss__yanit { padding-right: 0; }
  .serit-secici button { padding: 9px 14px; font-size: 14px; }
  .dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .goster { opacity: 1; transform: none; }
  .js .halkalar .h-aile, .js .halkalar .h-sirket { stroke-dashoffset: 0; }
  .js .halkalar .bolge, .js .halkalar .etiketler { opacity: 1; }
}

/* ---------- Yazdırma ---------- */
@media print {
  .ust, .alt, .iletisim-bant, .makale__cagri, .dugmeler, .serit-secici { display: none !important; }
  body { background: #fff; }
  .js .goster { opacity: 1; transform: none; }
}

/* =====================================================================
   PROFESYONEL KATMAN — üst bilgi çubuğu, bilgi şeridi, büro fotoğrafları,
   süreç adımları, makale içindekiler, mobil eylem çubuğu
   ===================================================================== */

/* Logo işaretlerinin varsayılan çizgisi (büyük çizim kendi kalınlığını tanımlar) */
.h-aile, .h-sirket { fill: none; stroke-width: 2.4; }

/* ---------- Üst bilgi çubuğu ---------- */
.ust-bar { background: var(--murekkep); color: var(--koyu-metin); font-size: 13px; letter-spacing: .01em; }
.ust-bar__ic { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 38px; }
.ust-bar__kimlik, .ust-bar__iletisim > * { display: inline-flex; align-items: center; gap: 8px; }
.ust-bar__iletisim { display: flex; gap: 26px; }
.ust-bar .ikon { width: 15px; height: 15px; color: #d8b768; }
.ust-bar a { text-decoration: none; transition: color .2s; }
.ust-bar a:hover { color: var(--zemin); }
@media (max-width: 1100px) { .ust-bar { display: none; } }

/* ---------- Bilgi şeridi (ana sayfa) ---------- */
.bilgi-seridi { border-top: 1px solid var(--cizgi); }
.bilgi-seridi__liste { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.bilgi-seridi__liste li { display: flex; align-items: center; gap: 14px; padding: 28px 24px; border-left: 1px solid var(--cizgi); }
.bilgi-seridi__liste li:first-child { border-left: 0; padding-left: 0; }
.bilgi-seridi .ikon { width: 28px; height: 28px; color: var(--kesisim); }
.bilgi-seridi strong { display: block; font: 400 1.08rem/1.3 var(--serif); color: var(--murekkep); }
.bilgi-seridi span { display: block; font-size: 13.5px; color: var(--soluk); margin-top: 2px; }

/* ---------- Fotoğraf kartı (ana sayfa tanıtım) ---------- */
.foto-kart { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: var(--golge); background: var(--zemin-2); }
.foto-kart__img { width: 100%; height: 100%; object-fit: cover; }
.foto-kart__etiket {
  position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px; background: rgba(251, 249, 245, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.foto-kart__isaret { width: 40px; height: auto; overflow: visible; flex: none; }
.foto-kart__etiket strong { display: block; font: 400 1.15rem/1.2 var(--serif); color: var(--murekkep); }
.foto-kart__etiket small { display: block; font-size: 12.5px; color: var(--soluk); margin-top: 3px; }

/* ---------- Süreç + hazırlık (alan sayfaları) ---------- */
.surec-alan { background: var(--kart); }
.sss-bolum { background: var(--zemin); }
.surec-alan__ic { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.adimlar { list-style: none; }
.adimlar li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding-bottom: 34px; }
.adimlar li:last-child { padding-bottom: 0; }
.adimlar li::before { content: ''; position: absolute; left: 25.5px; top: 56px; bottom: 4px; width: 1px; background: var(--cizgi); }
.adimlar li:last-child::before { display: none; }
.adimlar__no {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--vurgu); color: var(--vurgu); background: var(--kart); font: 400 1.25rem/1 var(--serif);
}
.adimlar h3 { font-size: 1.32rem; margin: 12px 0 6px; }
.adimlar p { color: var(--soluk); font-size: 15.5px; }

.hazirlik { position: sticky; top: calc(var(--ust-yukseklik) + 28px); display: flex; flex-direction: column; gap: 16px; }
.hazirlik__kart { background: var(--zemin); border: 1px solid var(--cizgi); border-top: 3px solid var(--vurgu); border-radius: 20px; padding: 28px; }
.hazirlik__ust { display: flex; align-items: center; gap: 10px; font: 400 1.35rem/1.2 var(--serif); color: var(--murekkep); }
.hazirlik__ust .ikon { width: 24px; height: 24px; color: var(--vurgu); }
.hazirlik__not { font-size: 14px; color: var(--soluk); margin: 10px 0 16px; }
.kontrol-listesi { list-style: none; margin-bottom: 24px; }
.kontrol-listesi li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cizgi); font-size: 15px; line-height: 1.5; }
.kontrol-listesi .ikon { width: 18px; height: 18px; color: var(--vurgu); margin-top: 2px; }
.mevzuat { padding: 22px 24px; border-radius: 18px; background: var(--vurgu-zemin); }
.mevzuat__baslik { display: flex; align-items: center; gap: 10px; font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 14px; }
.mevzuat__baslik .ikon { width: 18px; height: 18px; }
.mevzuat ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mevzuat li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--metin); }
.mevzuat li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--vurgu); }

/* ---------- Makale düzeni ---------- */
.okuma-cubugu { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.okuma-cubugu span { display: block; height: 100%; background: var(--vurgu); transform-origin: left center; transform: scaleX(0); }
.makale-izgara { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; column-gap: clamp(40px, 6vw, 88px); }
.makale__bas { grid-column: 2; padding: clamp(36px, 5vw, 64px) 0 28px; }
.makale__yan { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--ust-yukseklik) + 28px); padding-top: 22px; display: flex; flex-direction: column; gap: 36px; }
.makale__ana { grid-column: 2; grid-row: 2; }
.icindekiler__baslik, .paylas__baslik { font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soluk); margin-bottom: 14px; }
.icindekiler ol { list-style: none; border-left: 1px solid var(--cizgi); }
.icindekiler a {
  display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--soluk); text-decoration: none; transition: color .2s, border-color .2s;
}
.icindekiler a:hover { color: var(--murekkep); }
.icindekiler a[aria-current="true"] { color: var(--vurgu); border-left-color: var(--vurgu); font-weight: 600; }
.paylas__liste { display: flex; gap: 8px; }
.paylas__liste a, .paylas__liste button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi); background: transparent;
  display: grid; place-items: center; color: var(--murekkep-2); cursor: pointer; transition: border-color .2s, background .2s;
}
.paylas__liste a:hover, .paylas__liste button:hover { border-color: var(--murekkep-2); background: var(--kart); }
.paylas__liste .ikon { width: 18px; height: 18px; }
.paylas__durum { font-size: 13px; color: var(--vurgu); min-height: 1.3em; margin-top: 8px; }
.makale__govde h2 { scroll-margin-top: calc(var(--ust-yukseklik) + 24px); }

.yazar-karti { display: flex; gap: 20px; align-items: flex-start; margin-top: 32px; padding: 26px; border: 1px solid var(--cizgi); border-radius: 20px; background: var(--kart); }
.yazar-karti__isaret { --halka-aile: #d4825f; --halka-sirket: #7fb3aa; width: 64px; height: 64px; border-radius: 50%; background: var(--murekkep); display: grid; place-items: center; flex: none; }
.yazar-karti__logo { width: 36px; height: auto; overflow: visible; }
.yazar-karti__ust { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soluk); }
.yazar-karti__ad { font: 400 1.3rem/1.3 var(--serif); color: var(--murekkep); margin-top: 6px; }
.yazar-karti__metin { font-size: 15px; color: var(--soluk); margin: 6px 0 14px; }

/* ---------- Büro galerisi (hakkımda) ---------- */
.buro__adres { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--murekkep-2); }
.buro__adres span { color: var(--soluk); }
.buro__adres .ikon { width: 20px; height: 20px; margin-top: 2px; color: var(--kesisim); }
.buro__galeri { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
.buro__foto { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--zemin-2); min-height: 0; }
.buro__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gecis); }
.buro__foto:hover img { transform: scale(1.03); }
.buro__foto--0 { grid-row: span 2; aspect-ratio: 4 / 5; }

/* ---------- Bina girişi fotoğrafı (iletişim) ---------- */
.giris-foto { margin: 0 0 24px; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi); background: var(--kart); }
.giris-foto img { width: 100%; height: auto; }
.giris-foto figcaption { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; font-size: 14px; color: var(--soluk); }
.giris-foto .ikon { width: 18px; height: 18px; margin-top: 2px; color: var(--kesisim); }

/* ---------- Mobil eylem çubuğu ---------- */
.eylem-cubugu { display: none; }

@media (max-width: 1024px) {
  .bilgi-seridi__liste { grid-template-columns: repeat(2, 1fr); }
  .bilgi-seridi__liste li:nth-child(3) { border-left: 0; padding-left: 0; }
  .bilgi-seridi__liste li:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .makale-izgara { grid-template-columns: minmax(0, 720px); }
  .makale__bas, .makale__yan, .makale__ana { grid-column: 1; grid-row: auto; }
  .makale__yan { position: static; padding-top: 0; margin-bottom: 32px; gap: 20px; }
  .icindekiler { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 20px 22px; }
}
@media (max-width: 900px) {
  .surec-alan__ic { grid-template-columns: 1fr; }
  .hazirlik { position: static; }
  .buro__galeri { grid-template-columns: 1fr; grid-template-rows: none; }
  .buro__foto, .buro__foto--0 { grid-row: auto; aspect-ratio: 4 / 3; }
  .buro__adres { margin-top: 8px; }
}
@media (max-width: 760px) {
  .eylem-cubugu {
    display: flex; gap: 6px; position: fixed; z-index: 40; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 999px;
    background: rgba(18, 41, 42, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .5);
  }
  .eylem-cubugu a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px;
    border-radius: 999px; color: var(--zemin); text-decoration: none; font: 600 14.5px/1 var(--sans);
  }
  .eylem-cubugu .eylem-cubugu__ana { background: var(--zemin); color: var(--murekkep); }
  .eylem-cubugu .ikon { width: 18px; height: 18px; }
  .menu-acik .eylem-cubugu { display: none; }
  .alt { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .bilgi-seridi__liste { grid-template-columns: 1fr; }
  .bilgi-seridi__liste li { border-left: 0; padding: 18px 0; }
  .bilgi-seridi__liste li:nth-child(n+2) { border-top: 1px solid var(--cizgi); }
  .yazar-karti { flex-direction: column; }
}
@media print {
  .ust-bar, .eylem-cubugu, .okuma-cubugu, .makale__yan { display: none !important; }
}

/* =====================================================================
   HAREKET KATMANI — kaydırmaya bağlı efektler
   site.js, "hareket azaltma" kapalıysa <html>'e .hareket sınıfını ekler.
   Üç evre sahnesi yalnızca geniş ekranda (.sahne-acik) sabitlenir;
   mobilde ve hareket azaltmada normal liste görünümü kalır.
   ===================================================================== */

/* ---------- Üç evre: sabitlenen sahne ---------- */
.evre-sahne__halka, .evre-adimlari { display: none; }

.evreler.sahne-acik { padding-block: 0; }
.sahne-acik .evre-sahne { position: relative; height: 320vh; }
.sahne-acik .evre-sahne__yapiskan {
  position: sticky; top: var(--ust-yukseklik);
  height: calc(100vh - var(--ust-yukseklik));
  display: flex; align-items: center; overflow: hidden;
}
.sahne-acik .evre-sahne__yapiskan > .kap { width: 100%; }
.sahne-acik .bolum__bas { margin-bottom: 18px; }
.sahne-acik .bolum__giris { display: none; }
.sahne-acik .serit-secici { margin-bottom: 10px; }
.sahne-acik .evre-sahne__alan { position: relative; height: 362px; }
.sahne-acik .evre-sahne__halka { display: block; position: absolute; left: 50%; top: 0; width: 480px; margin-left: -240px; }

.sahne-halka { width: 100%; height: auto; overflow: visible; }
.sahne-halka .h-aile, .sahne-halka .h-sirket { stroke-width: 11; transition: opacity .4s; }
.sh-mercek { fill: var(--kesisim-acik); }
.sh-etiket { font: italic 400 28px var(--serif); text-anchor: middle; transition: opacity .4s; }
.sh-etiket--aile { fill: var(--aile); }
.sh-etiket--sirket { fill: var(--sirket); }
.sh-mercek-yazi { font: italic 400 14px var(--serif); fill: var(--kesisim-koyu); text-anchor: middle; }
.evreler[data-gorunum="aile"] .sh-sirket, .evreler[data-gorunum="aile"] .sh-etiket--sirket,
.evreler[data-gorunum="sirket"] .sh-aile, .evreler[data-gorunum="sirket"] .sh-etiket--aile { opacity: .22; }

.sahne-acik .evre-listesi { position: absolute; inset: 0; }
.sahne-acik .evre-listesi::before { display: none; }
.sahne-acik .evre {
  position: absolute; inset: 0; padding: 0; gap: 0 36px;
  grid-template-columns: 1fr 460px 1fr; grid-template-rows: 262px auto; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--gecis);
}
.sahne-acik .evre.etkin { opacity: 1; pointer-events: auto; }
.sahne-acik .evre__serit--aile { grid-column: 1; grid-row: 1; }
.sahne-acik .evre__serit--sirket { grid-column: 3; grid-row: 1; }
.sahne-acik .evre__orta { grid-column: 2; grid-row: 2; align-self: start; background: none; padding: 4px 0 0; }
.sahne-acik .evre__serit::after { display: none; }
.sahne-acik .evre__serit { transition: opacity .45s, filter .45s, background .45s, border-color .45s, transform .7s var(--gecis); }
.sahne-acik .evre:not(.etkin) .evre__serit--aile { transform: translateX(-28px); }
.sahne-acik .evre:not(.etkin) .evre__serit--sirket { transform: translateX(28px); }
.sahne-acik .evre:not(.etkin) .evre__orta { transform: translateY(10px); }
.sahne-acik .evre__orta { transition: transform .6s var(--gecis); }

.sahne-acik .evre-adimlari {
  display: grid; grid-template-columns: repeat(3, 1fr); position: relative;
  width: min(560px, 100%); margin: 26px auto 0; padding-top: 20px;
}
.evre-adimlari__ray { position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; border-radius: 2px; background: var(--cizgi); overflow: hidden; }
.evre-adimlari__dolgu { display: block; height: 100%; background: var(--murekkep); transform-origin: left center; transform: scaleX(0); }
.evre-adimlari button {
  position: relative; border: 0; background: none; cursor: pointer; padding: 6px 4px;
  font: 600 13.5px/1.2 var(--sans); color: var(--soluk); transition: color .3s;
}
.evre-adimlari button::before {
  content: ''; position: absolute; top: -26px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--kart); border: 2px solid var(--cizgi); box-sizing: border-box;
  transition: border-color .3s, background .3s;
}
.evre-adimlari button b { font: italic 400 14px var(--serif); margin-right: 3px; }
.evre-adimlari button:hover { color: var(--murekkep); }
.evre-adimlari button[aria-current="step"] { color: var(--murekkep); }
.evre-adimlari button[aria-current="step"]::before,
.evre-adimlari button.gecti::before { border-color: var(--murekkep); background: var(--murekkep); }

/* ---------- Kaydırmayla akan büyük yazı ---------- */
.alanlar { padding-bottom: clamp(32px, 4vw, 56px); }
.kayan-yazi { overflow: hidden; padding: clamp(8px, 2vw, 20px) 0 clamp(44px, 6vw, 80px); }
.kayan-yazi__ic { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); width: max-content; will-change: transform; transform: translate3d(-120px, 0, 0); }
.kayan-yazi span {
  font: italic 300 clamp(3rem, 1.6rem + 6vw, 7.5rem)/1.12 var(--serif); letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(18, 41, 42, .3);
}
.kayan-yazi span.dolu { color: var(--kesisim); -webkit-text-stroke: 0; opacity: .55; }
.kayan-yazi i { flex: none; width: clamp(12px, 1.4vw, 20px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--kesisim); opacity: .7; }

/* ---------- Kesişim simgesi ---------- */
.mercek-ikon { width: 120px; overflow: visible; }

/* ---------- Kahraman: aşağı kayarken uzaklaşma ---------- */
.hareket .kahraman__metin, .hareket .kahraman .halkalar, .hareket .kahraman .lejant { will-change: transform; }

/* ---------- Fotoğraf parallaksı + perde açılışı ---------- */
.hareket .paralaks { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); transition: none; will-change: transform; }
.hareket .buro__foto:hover img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }
.hareket .tanitim__gorsel.goster .foto-kart__img { clip-path: inset(14% 10% 14% 10%); transition: clip-path 1.5s var(--gecis); }
.hareket .tanitim__gorsel.goster.gorundu .foto-kart__img { clip-path: inset(0 0 0 0); }
.hareket .tanitim__gorsel.goster .foto-kart__etiket { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--gecis) .9s, transform .8s var(--gecis) .9s; }
.hareket .tanitim__gorsel.goster.gorundu .foto-kart__etiket { opacity: 1; transform: none; }
.hareket .buro__foto.goster { clip-path: inset(10% 10% 10% 10% round 22px); transition: opacity .8s var(--gecis), transform .8s var(--gecis), clip-path 1.5s var(--gecis); }
.hareket .buro__foto.goster.gorundu { clip-path: inset(0 0 0 0 round 22px); }

/* ---------- Bölüm üst başlığındaki çizginin uzaması ---------- */
.hareket .goster .ust-baslik::before, .hareket .goster .ust-baslik::after { transform: scaleX(0); transition: transform .9s var(--gecis) .2s; }
.hareket .goster .ust-baslik::before { transform-origin: right center; }
.hareket .goster .ust-baslik::after { transform-origin: left center; }
.hareket .goster.gorundu .ust-baslik::before, .hareket .goster.gorundu .ust-baslik::after { transform: scaleX(1); }

/* ---------- Çalışma biçimi: adımlar arası çizgi ---------- */
.surec__no { z-index: 1; }
.hareket .surec-listesi li::after {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--murekkep);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--gecis) .3s;
}
.hareket .surec-listesi li.gorundu::after { transform: scaleX(1); }

/* ---------- Alan sayfaları: süreç çizgisi kaydırdıkça dolar ---------- */
.adimlar { position: relative; }
.adimlar__no { position: relative; z-index: 1; transition: background .4s, color .4s; }
.hareket .adimlar::after {
  content: ''; position: absolute; left: 25.5px; top: 26px; bottom: 26px; width: 1px; background: var(--vurgu);
  transform-origin: top center; transform: scaleY(var(--dolum, 0));
}
.hareket .adimlar li.gecti .adimlar__no { background: var(--vurgu); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .kayan-yazi__ic { transform: none; }
}

/* =====================================================================
   ETKİLEŞİM KATMANI — yol gösterici, hukuk sözlüğü, form, mikro etkileşimler
   ===================================================================== */

/* ---------- Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 260ms var(--gecis) both sayfa-cik; }
::view-transition-new(root) { animation: 420ms var(--gecis) both sayfa-gir; }
.ust { view-transition-name: ust-baslik; }
@keyframes sayfa-cik { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Kahraman başlığı: kelimeler sırayla yükselir ---------- */
.kahraman__baslik .k { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .14em 0; margin-bottom: -.14em; }
.kahraman__baslik .k > * { display: inline-block; }
.hareket .kahraman__baslik .k > * { transform: translateY(110%); animation: kelime-yuksel 1.1s var(--gecis) forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
.hareket .kahraman__giris, .hareket .kahraman .dugmeler, .hareket .kahraman .ust-baslik { opacity: 0; animation: belir-yuksel .9s var(--gecis) forwards; }
.hareket .kahraman .ust-baslik { animation-delay: .05s; }
.hareket .kahraman__giris { animation-delay: .6s; }
.hareket .kahraman .dugmeler { animation-delay: .75s; }
@keyframes kelime-yuksel { to { transform: none; } }
@keyframes belir-yuksel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Kahraman halkaları fareyle hafifçe eğilir */
.kahraman__gorsel { perspective: 1000px; }
.kahraman__gorsel .halka-egim { transition: transform .6s var(--gecis); transform-style: preserve-3d; }

/* ---------- Kartlarda fareyi izleyen ışık ---------- */
.isik { isolation: isolate; }
.isik::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--isik-renk, rgba(255, 255, 255, .7)), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.isik:hover::after { opacity: 1; }
.yazi-karti.isik, .ilke-kartlari .isik, .diger-alan.isik { --isik-renk: rgba(165, 127, 45, .10); }
.ilke-kartlari li, .diger-alan { position: relative; }
.yukari { visibility: hidden; }
.yukari.gorunur { visibility: visible; }
.sozluk-notu .ikon { width: 18px; height: 18px; color: var(--vurgu); flex: none; }

/* ---------- Menü: kayan gösterge ---------- */
.menu__liste { position: relative; }
.menu__isaret { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--zemin-2); opacity: 0; z-index: -1; pointer-events: none; transition: left .35s var(--gecis), width .35s var(--gecis), opacity .25s; }
.menu__liste.isaretli { isolation: isolate; }
.menu__liste.isaretli a:hover, .menu__liste.isaretli a[aria-current="page"] { background: transparent; }
@media (max-width: 1100px) { .menu__isaret { display: none; } }

/* ---------- Yukarı dön düğmesi + ilerleme halkası ---------- */
.yukari {
  position: fixed; right: 24px; bottom: 24px; z-index: 39; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--kart); color: var(--murekkep); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--golge); opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .35s, transform .35s var(--gecis);
}
.yukari.gorunur { opacity: 1; transform: none; }
.yukari:hover { background: #fff; }
.yukari__halka { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.yukari__halka circle { fill: none; stroke: var(--cizgi); stroke-width: 2; }
.yukari__halka .yukari__dolgu { stroke: var(--kesisim); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.yukari .ikon { width: 20px; height: 20px; position: relative; }
@media (max-width: 760px) { .yukari { display: none; } }

/* ---------- Yol gösterici ---------- */
.rehber { background: var(--kart); }
.rehber__ic { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.rehber__liste { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--ust-yukseklik) + 24px); }
.rehber__secenek {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; cursor: pointer;
  font: 500 15.5px/1.35 var(--sans); color: var(--murekkep-2); transition: background .25s, border-color .25s, color .25s, padding .3s var(--gecis);
}
.rehber__secenek:hover { background: var(--zemin); }
.rehber__secenek[aria-selected="true"] { background: var(--zemin); border-color: var(--cizgi); color: var(--murekkep); font-weight: 600; padding-left: 22px; }
.rehber__secenek::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: var(--secenek-renk); transform: scaleY(0); transition: transform .3s var(--gecis);
}
.rehber__secenek[aria-selected="true"]::before { transform: scaleY(1); }
.rehber__secenek-yazi { flex: 1; }
.rehber__nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--secenek-renk); flex: none; }
.rehber__ok { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--gecis); }
.rehber__secenek[aria-selected="true"] .rehber__ok, .rehber__secenek:hover .rehber__ok { opacity: 1; transform: none; }
.rehber__secenek--aile { --secenek-renk: var(--aile); }
.rehber__secenek--sirket { --secenek-renk: var(--sirket); }
.rehber__secenek--kesisim { --secenek-renk: var(--kesisim); }

.rehber__panel {
  position: relative; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 24px;
  padding: clamp(26px, 3.5vw, 44px); border-top: 3px solid var(--panel-renk);
}
.rehber__panel + .rehber__panel { margin-top: 20px; }
.js .rehber__panel + .rehber__panel { margin-top: 0; }
.rehber__panel:focus-visible { outline-offset: 4px; }
.rehber__panel--aile { --panel-renk: var(--aile); --panel-zemin: var(--aile-zemin); }
.rehber__panel--sirket { --panel-renk: var(--sirket); --panel-zemin: var(--sirket-zemin); }
.rehber__panel--kesisim { --panel-renk: var(--kesisim); --panel-zemin: var(--kesisim-zemin); }
.rehber__panel .etiket-hap { background: var(--panel-zemin); color: var(--panel-renk); margin-bottom: 14px; }
.rehber__panel--kesisim .etiket-hap { color: var(--kesisim-koyu); }
.hareket .rehber__panel.giris { animation: panel-gir .55s var(--gecis) both; }
@keyframes panel-gir { from { opacity: 0; transform: translateY(14px); } }

.rehber__panel-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.rehber__baslik { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.15; }
.rehber__halka { width: 120px; flex: none; margin-top: -6px; }
.rehber__halka .halkalar .h-aile, .rehber__halka .halkalar .h-sirket { stroke-width: 15; }
.rehber__halka .etiketler { display: none; }
.rehber__metin { margin: 18px 0 26px; font-size: 1.05rem; color: var(--metin); max-width: 62ch; }
.rehber__iki { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 22px 0; border-block: 1px solid var(--cizgi); }
.rehber__kucuk { font: 700 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soluk); margin-bottom: 14px; }
.rehber__adimlar { list-style: none; counter-reset: adim; display: flex; flex-direction: column; gap: 10px; }
.rehber__adimlar li { counter-increment: adim; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 15px; line-height: 1.5; }
.rehber__adimlar li::before { content: counter(adim); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--sans); color: #fff; background: var(--panel-renk); margin-top: 1px; }
.rehber__belgeler { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rehber__belgeler li { display: flex; gap: 8px; font-size: 15px; line-height: 1.5; }
.rehber__belgeler .ikon { width: 18px; height: 18px; color: var(--panel-renk); margin-top: 2px; }
.rehber__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.rehber__not { margin-top: 16px; font-size: 12.5px; color: var(--soluk); }

@media (max-width: 900px) {
  .rehber__ic { grid-template-columns: 1fr; }
  .rehber__liste { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); scrollbar-width: none; }
  .rehber__liste::-webkit-scrollbar { display: none; }
  .rehber__secenek { width: auto; flex: none; scroll-snap-align: start; border-color: var(--cizgi); background: var(--zemin); padding: 12px 16px; white-space: nowrap; }
  .rehber__secenek[aria-selected="true"] { padding-left: 16px; background: var(--murekkep); color: var(--zemin); border-color: var(--murekkep); }
  .rehber__secenek::before, .rehber__ok { display: none; }
  .rehber__secenek[aria-selected="true"] .rehber__nokta { box-shadow: 0 0 0 2px var(--zemin); }
  .rehber__halka { width: 84px; }
}
@media (max-width: 560px) {
  .rehber__iki { grid-template-columns: 1fr; }
}

/* ---------- Hukuk sözlüğü baloncukları ---------- */
.terim {
  position: relative; cursor: help; border-radius: 3px; outline-offset: 2px;
  text-decoration: underline dotted var(--vurgu); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.terim:hover, .terim:focus { background: var(--vurgu-zemin); }
.terim__tanim {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; width: max-content; max-width: min(300px, 80vw);
  padding: 12px 15px; border-radius: 12px; background: var(--murekkep); color: var(--koyu-metin);
  font: 400 13.5px/1.55 var(--sans); text-align: left; white-space: normal; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(calc(-50% + var(--kx, 0px)), 6px); transition: opacity .2s, transform .25s var(--gecis), visibility .2s;
}
.terim__tanim strong { display: block; font: 400 1.02rem/1.3 var(--serif); color: #e2c57f; margin-bottom: 4px; }
.terim__tanim::after { content: ''; position: absolute; top: 100%; left: calc(50% - var(--kx, 0px)); margin-left: -6px; border: 6px solid transparent; border-top-color: var(--murekkep); }
.terim:hover .terim__tanim, .terim:focus .terim__tanim { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--kx, 0px)), 0); }
.terim.alta .terim__tanim { bottom: auto; top: calc(100% + 12px); }
.terim.alta .terim__tanim::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--murekkep); }
.sozluk-notu { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--soluk); margin-top: 8px; }
.sozluk-notu .terim-ornek { text-decoration: underline dotted var(--vurgu); text-decoration-thickness: 1.5px; text-underline-offset: 4px; color: var(--murekkep-2); }

/* ---------- Form: seçenek çipleri, sayaç, başarı ekranı ---------- */
.alan__sayac { align-self: flex-end; font-size: 12.5px; color: var(--soluk); margin-top: -2px; }
.alan__sayac.dolmak-uzere { color: var(--aile); }
.secenekler { border: 0; margin: 0; padding: 0; min-width: 0; }
.secenekler legend { padding: 0; margin-bottom: 10px; }
.secenekler__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.secenek { position: relative; cursor: pointer; }
.secenek input { position: absolute; opacity: 0; pointer-events: none; }
.secenek span {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--cizgi);
  background: #fffdf9; font-size: 14.5px; color: var(--murekkep-2); transition: background .2s, border-color .2s, color .2s;
}
.secenek:hover span { border-color: var(--murekkep-2); }
.secenek input:checked + span { background: var(--murekkep); border-color: var(--murekkep); color: var(--zemin); }
.secenek input:focus-visible + span { outline: 2px solid var(--murekkep); outline-offset: 2px; }

.form-basari { text-align: center; padding: 24px 8px 8px; }
.form-basari:focus { outline: none; }
.form-basari__isaret { width: 76px; height: 76px; margin: 0 auto 20px; }
.form-basari__isaret circle, .form-basari__isaret path { fill: none; stroke: var(--sirket); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.form-basari:not([hidden]) .form-basari__isaret circle { animation: halka-ciz .8s var(--gecis) forwards; }
.form-basari:not([hidden]) .form-basari__isaret path { animation: halka-ciz .5s var(--gecis) .6s forwards; }
.form-basari h3 { font-size: 1.7rem; margin-bottom: 10px; }
.form-basari p { color: var(--soluk); max-width: 44ch; margin-inline: auto; }
.form-basari .dugmeler { justify-content: center; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .form-basari__isaret circle, .form-basari__isaret path { stroke-dashoffset: 0; }
}

/* =====================================================================
   LOGO — büro tabelasından türetilen kimlik (assets/img/logo/)
   ===================================================================== */
.logo__gorsel { display: block; height: 60px; width: auto; }
.alt .logo__gorsel { height: 60px; }
.monogram__isaret { width: 64px; height: auto; }
.foto-kart__isaret { width: 34px; height: auto; flex: none; }
.yazar-karti__logo { width: 32px; height: auto; }
@media (max-width: 560px) { .logo__gorsel { height: 48px; } }

/* ---------- Tasarım imzası (en alt şerit) ---------- */
.alt__tasarim { border-top: 1px solid rgba(245, 241, 234, .06); display: flex; justify-content: center; padding: 16px var(--kenar) 20px; }
.alt__tasarim a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: rgba(245, 241, 234, .45); transition: color .3s; }
.alt__tasarim a:hover { color: var(--zemin); }
.alt__tasarim img { height: 20px; width: auto; opacity: .6; transition: opacity .3s; }
.alt__tasarim a:hover img { opacity: 1; }

/* =====================================================================
   KARŞILAŞTIRMA · PAY ARACI · ÖNE ÇIKAN YAZI
   ===================================================================== */

/* ---------- Karşılaştırma tablosu (alan sayfaları) ---------- */
.karsilastirma { background: var(--kart); }
.karsilastirma .bolum__bas--yan { align-items: flex-end; }
.karsilastirma__secici { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--zemin); }
.karsilastirma__secici button {
  border: 0; background: transparent; cursor: pointer; padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--soluk); transition: background .25s, color .25s;
}
.karsilastirma__secici button[aria-pressed="true"] { background: var(--murekkep); color: var(--zemin); }
.karsilastirma__secici button:not([aria-pressed="true"]):hover { color: var(--murekkep); }
.karsilastirma__kutu { border: 1px solid var(--cizgi); border-radius: 22px; overflow: hidden; background: var(--zemin); }
.karsilastirma__tablo { width: 100%; border-collapse: collapse; table-layout: fixed; }
.karsilastirma__tablo th, .karsilastirma__tablo td { padding: 20px 26px; text-align: left; vertical-align: top; border-top: 1px solid var(--cizgi); transition: background .35s, opacity .35s, color .35s; }
.karsilastirma__tablo thead th { border-top: 0; font: 400 1.3rem/1.3 var(--serif); color: var(--murekkep); background: var(--vurgu-zemin); }
.karsilastirma__tablo thead th:first-child { width: 22%; }
.karsilastirma__tablo tbody th { font: 700 11.5px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.karsilastirma__tablo td { font-size: 15.5px; color: var(--metin); }
.karsilastirma__tablo td + td, .karsilastirma__tablo th + th + th { border-left: 1px solid var(--cizgi); }
[data-vurgu="1"] .karsilastirma__tablo :is(td, th):nth-child(2),
[data-vurgu="2"] .karsilastirma__tablo :is(td, th):nth-child(3) { background: var(--kart); box-shadow: inset 0 0 0 0 transparent; }
[data-vurgu="1"] .karsilastirma__tablo thead th:nth-child(2),
[data-vurgu="2"] .karsilastirma__tablo thead th:nth-child(3) { background: var(--vurgu); color: #fff; }
[data-vurgu="1"] .karsilastirma__tablo td:nth-child(3),
[data-vurgu="2"] .karsilastirma__tablo td:nth-child(2) { opacity: .38; }
.karsilastirma__not { display: flex; gap: 10px; align-items: flex-start; padding: 16px 26px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); background: var(--kart); }
.karsilastirma__not .ikon { width: 18px; height: 18px; color: var(--vurgu); margin-top: 2px; }

@media (max-width: 760px) {
  .karsilastirma__tablo, .karsilastirma__tablo tbody, .karsilastirma__tablo tr { display: block; }
  .karsilastirma__tablo thead { display: none; }
  .karsilastirma__tablo tr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cizgi); }
  .karsilastirma__tablo tbody tr:first-child { border-top: 0; }
  .karsilastirma__tablo tbody th { grid-column: 1 / -1; padding: 16px 18px 4px; border: 0; }
  .karsilastirma__tablo td { border: 0; padding: 6px 18px 16px; font-size: 14.5px; }
  .karsilastirma__tablo td::before { content: attr(data-baslik); display: block; font: 400 .98rem/1.3 var(--serif); color: var(--vurgu); margin-bottom: 4px; }
  .karsilastirma__tablo td + td { border-left: 1px solid var(--cizgi); }
  .karsilastirma__secici { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 16px; }
  .karsilastirma__secici button { padding: 10px 6px; font-size: 13px; border-radius: 12px; }
}

/* ---------- Pay aracı (aile şirketleri) ---------- */
.pay-araci { background: var(--kart); }
.pay-araci__ic { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pay-araci__secenekler { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-secenek {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 16px; background: var(--zemin); font-size: 15.5px; color: var(--murekkep-2);
  transition: border-color .25s, background .25s, transform .3s var(--gecis);
}
.pay-secenek:hover { border-color: var(--kesisim); transform: translateX(4px); }
.pay-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.pay-secenek__daire { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cizgi); flex: none; display: grid; place-items: center; transition: border-color .25s; }
.pay-secenek__daire::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--kesisim); transform: scale(0); transition: transform .3s var(--gecis); }
.pay-secenek:has(input:checked) { border-color: var(--kesisim); background: var(--kesisim-zemin); color: var(--murekkep); font-weight: 600; }
.pay-secenek input:checked + .pay-secenek__daire { border-color: var(--kesisim); }
.pay-secenek input:checked + .pay-secenek__daire::after { transform: scale(1); }
.pay-secenek input:focus-visible + .pay-secenek__daire { outline: 2px solid var(--murekkep); outline-offset: 3px; }

.pay-araci__sonuclar { position: sticky; top: calc(var(--ust-yukseklik) + 24px); }
.pay-sonuc { border-radius: 22px; padding: clamp(26px, 3.5vw, 40px); background: var(--zemin); border: 1px solid var(--cizgi); border-top: 3px solid var(--sonuc-renk, var(--cizgi)); }
.js .pay-sonuc { display: none; }
.js .pay-sonuc.acik { display: block; }
.hareket .pay-sonuc.acik { animation: panel-gir .5s var(--gecis) both; }
.pay-sonuc--bos { text-align: center; color: var(--soluk); border-top-width: 1px; }
.pay-sonuc--bos .pay-sonuc__halka { width: 160px; margin: 0 auto 14px; opacity: .8; }
.pay-sonuc--bos .etiketler { display: none; }
.pay-sonuc--kisisel { --sonuc-renk: var(--sirket); --sonuc-zemin: var(--sirket-zemin); }
.pay-sonuc--edinilmis { --sonuc-renk: var(--aile); --sonuc-zemin: var(--aile-zemin); }
.pay-sonuc--karma { --sonuc-renk: var(--kesisim-koyu); --sonuc-zemin: var(--kesisim-zemin); }
.pay-sonuc__ust { font: 700 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.pay-sonuc__etiket {
  display: inline-block; margin: 12px 0 16px; padding: 8px 16px; border-radius: 999px;
  font: 400 1.35rem/1.25 var(--serif); color: var(--sonuc-renk); background: var(--sonuc-zemin);
}
.pay-sonuc__metin { font-size: 1.04rem; color: var(--metin); }
.pay-araci__not { margin-top: 14px; font-size: 13px; color: var(--soluk); }
@media (max-width: 900px) {
  .pay-araci__ic { grid-template-columns: 1fr; }
  .pay-araci__sonuclar { position: static; }
}

/* ---------- Öne çıkan yazı (yazılar sayfası) ---------- */
.yazi-karti--one { grid-column: span 2; grid-row: span 2; min-height: 340px; padding: 44px 46px 40px; overflow: hidden; justify-content: flex-end; }
.yazi-karti--one .etiket-hap { margin-bottom: 22px; }
.yazi-karti--one .yazi-karti__baslik { margin-top: auto; }
.yazi-karti--one .yazi-karti__bilgi { margin-top: 0; }
.yazi-karti--one .yazi-karti__baslik { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); max-width: 18ch; line-height: 1.15; }
.yazi-karti--one .yazi-karti__ozet { font-size: 1.04rem; max-width: 46ch; }
.yazi-karti__halka { position: absolute; right: -60px; top: -40px; width: 380px; opacity: .45; pointer-events: none; z-index: -1; }
.yazi-karti__halka .etiketler { display: none; }
.yazi-karti__rozet { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--kesisim-koyu); }
.yazi-karti__rozet::before { content: ''; width: 24px; height: 1px; background: currentColor; }
@media (max-width: 1024px) { .yazi-karti--one { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 640px) {
  .yazi-karti--one { padding: 30px 26px; }
  .yazi-karti__halka { width: 200px; }
}