/* Rues · hizmet sayfaları. stil.css'ten sonra yüklenir; temalar ve değişkenler oradan gelir. */

.sayfa { position: relative; z-index: 1; overflow-x: clip; }
.sayfa::before { /* üstte, başlığın arkasında tek ışık; sayfa zemini düz kalır */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 82% 8%, var(--zemin-isik), transparent 70%);
}
.menu a[aria-current="page"] { color: var(--murekkep); }

/* ---------- başlık ---------- */
.bas { padding-top: 64px; }
.bas-satir { display: flex; align-items: flex-end; gap: clamp(18px, 2.4vw, 36px); }
.no {
  font-weight: 200; font-stretch: 112%; font-size: clamp(64px, 9.4vw, 148px); line-height: .8;
  letter-spacing: -.05em; color: var(--imza); font-variant-numeric: tabular-nums lining-nums;
}
[data-theme^="sb"] .no { color: var(--murekkep-3); }
.bas h1 {
  margin: 0; font-weight: 780; font-stretch: 112%; font-size: clamp(52px, 8.2vw, 128px);
  line-height: .86; letter-spacing: -.045em; text-wrap: balance;
}
.bas h1 .ince { font-weight: 260; }
.bas-alt {
  margin-top: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi-guclu);
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  font-size: 13px; font-weight: 560; font-stretch: 88%; letter-spacing: .07em; text-transform: uppercase;
  color: var(--murekkep-2);
}
.bas-alt .sira { display: flex; gap: 14px; align-items: baseline; color: var(--murekkep-3); }
.bas-alt .sira a { color: var(--murekkep-2); text-decoration: none; }
.bas-alt .sira a:hover { color: var(--murekkep); }

.ozet {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px;
  padding: 44px 0 20px; align-items: start;
}
.ozet .giris { margin: 0; font-size: 23px; line-height: 1.45; max-width: 31em; color: var(--murekkep); }
.ozet .giris + .giris { margin-top: 16px; font-size: 19px; color: var(--murekkep-2); }
.tanimlar { margin: 4px 0 0; display: grid; }
.tanimlar div {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: baseline;
  padding: 14px 0 15px; border-top: 1px solid var(--cizgi);
}
.tanimlar div:last-child { border-bottom: 1px solid var(--cizgi); }
.tanimlar dt { font-weight: 720; font-stretch: 108%; font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.tanimlar dt small { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 520; letter-spacing: .02em; font-stretch: 92%; color: var(--murekkep-3); }
.tanimlar dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--murekkep-2); }
.tanimlar dd b { color: var(--murekkep); font-weight: 620; }

/* ---------- bölüm başı ---------- */
.bolum { padding-top: 104px; }
.bolum-bas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: end;
  margin-bottom: 34px;
}
.bolum-bas h2 {
  margin: 0; font-weight: 720; font-stretch: 104%; font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1; letter-spacing: -.035em;
}
.bolum-bas h2 span { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 560; font-stretch: 88%; letter-spacing: .07em; text-transform: uppercase; color: var(--murekkep-3); }
.bolum-bas p { margin: 0; font-family: var(--serif); font-size: 18.5px; line-height: 1.5; color: var(--murekkep-2); max-width: 34em; text-wrap: pretty; }

/* ---------- üçlü ---------- */
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cizgi-guclu); }
.uclu > section { padding: 26px 32px 8px 0; }
.uclu > section + section { padding-left: 32px; border-left: 1px solid var(--cizgi); }
.uclu h3 {
  margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px;
  font-weight: 700; font-stretch: 104%; font-size: 25px; letter-spacing: -.025em;
}
.uclu h3 b { font-weight: 300; font-size: 25px; color: var(--imza); font-variant-numeric: tabular-nums; }
[data-theme^="sb"] .uclu h3 b { color: var(--murekkep-3); }
.uclu ul { list-style: none; margin: 0; padding: 0; }
.uclu li { padding: 13px 0 14px; border-top: 1px solid var(--cizgi); font-size: 15.5px; line-height: 1.5; color: var(--murekkep-2); }
.uclu li b { display: block; margin-bottom: 3px; color: var(--murekkep); font-weight: 620; font-size: 16px; letter-spacing: -.005em; }

/* ---------- zengin panel çerçevesi ---------- */
.tezgah {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  border: 1px solid var(--cizgi-guclu);
}
.tezgah::before, .tezgah::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--cizgi-guclu); border-style: solid;
}
.tezgah::before { top: -8px; left: -8px; border-width: 1px 0 0 1px; }
.tezgah::after { bottom: -8px; right: -8px; border-width: 0 1px 1px 0; }
.tezgah > .pano { border: 0; border-radius: 0; }
.yan { padding: 28px 30px 26px; border-left: 1px solid var(--cizgi-guclu); display: flex; flex-direction: column; }
.yan p.yan-ust { font-family: var(--grotesk); font-size: 12.5px; font-weight: 560; font-stretch: 90%; letter-spacing: .07em; text-transform: uppercase; color: var(--murekkep-3); margin: 0 0 12px; }
.yan h3 { margin: 0; font-weight: 720; font-stretch: 104%; font-size: 30px; line-height: 1.04; letter-spacing: -.03em; }
.yan p { margin: 14px 0 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.5; color: var(--murekkep-2); text-wrap: pretty; }
.yan-rakam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi); }
.yan-rakam p { margin: 0; font-family: var(--grotesk); }
.yan-rakam .r { font-weight: 700; font-stretch: 86%; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--murekkep); font-variant-numeric: tabular-nums lining-nums; }
.yan-rakam .e { margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--murekkep-3); }
.yan-sira { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: s; border-top: 1px solid var(--cizgi); }
.yan-sira li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.4; color: var(--murekkep-2); }
.yan-sira li::before { content: counter(s, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--murekkep-3); font-variant-numeric: tabular-nums; }
.yan-sira li span { font-size: 12px; color: var(--murekkep-3); white-space: nowrap; }
.yan-sira-bas { margin: 22px 0 0 !important; font-family: var(--grotesk) !important; font-size: 12.5px !important; font-weight: 600; color: var(--murekkep-2) !important; }
.yan-sira-bas + .yan-sira { margin-top: 10px; }
.yan-dip { margin-top: auto !important; padding-top: 22px; font-family: var(--grotesk) !important; font-size: 13px !important; color: var(--murekkep-3) !important; }

/* panel içi ortak parçalar */
.pano .ornek { white-space: nowrap; }
.p-ozet { display: flex; align-items: flex-end; gap: 26px; margin-top: 16px; }
.p-puan { margin: 0; font-weight: 700; font-stretch: 84%; font-size: 52px; line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.p-puan small { font-size: 18px; font-weight: 500; color: var(--p-murekkep-3); letter-spacing: 0; margin-left: 2px; }
.p-puan-ad { margin: 6px 0 0; font-size: 13px; color: var(--p-murekkep-2); }
.yigin { flex: 1; min-width: 0; }
.yigin-cubuk { display: flex; height: 8px; gap: 3px; }
.yigin-cubuk span { display: block; height: 100%; border-radius: 2px; transition: flex-grow .5s var(--egri); }
.yigin-cubuk .y-tamam { background: var(--p-seri); }
.yigin-cubuk .y-kismi { background: color-mix(in srgb, var(--p-seri) 45%, transparent); }
.yigin-cubuk .y-eksik { background: var(--p-cubuk-zemin); box-shadow: inset 0 0 0 1px var(--p-cizgi); }
.yigin-lejant { display: flex; gap: 18px; margin-top: 10px; font-size: 12.5px; color: var(--p-murekkep-3); flex-wrap: wrap; }
.yigin-lejant span { display: inline-flex; align-items: center; gap: 7px; }
.yigin-lejant b { color: var(--p-murekkep); font-weight: 640; font-variant-numeric: tabular-nums; }

/* durum işareti: renk değil biçim (dolu, yarım, boş) */
.durum { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--p-seri); border-radius: 2px; flex: none; }
.durum.tamam { background: var(--p-seri); }
.durum.kismi { background: linear-gradient(90deg, var(--p-seri) 50%, transparent 50%); }
.durum.eksik { border-color: var(--p-murekkep-3); }

.p-sekmeler { margin-top: 18px; }
.p-sekmeler button { font-size: 14.5px; }

/* liste + ayrıntı */
.liste-ayrinti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 0; margin-top: 4px; min-height: 352px; }
.maddeler { list-style: none; margin: 0; padding: 6px 0 0; }
.maddeler button {
  width: 100%; display: grid; grid-template-columns: 11px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px 11px 2px; border: 0; border-bottom: 1px solid var(--p-cizgi); background: none; cursor: pointer;
  text-align: left; font-size: 14.5px; line-height: 1.35; color: var(--p-murekkep-2);
  position: relative; transition: color .2s;
}
.maddeler button::after { /* seçili satırın sağında ince çizgi, ayrıntıya bağlar */
  content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 1px; background: var(--p-murekkep);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--egri);
}
.maddeler button[aria-pressed="true"] { color: var(--p-murekkep); font-weight: 600; }
.maddeler button[aria-pressed="true"]::after { transform: scaleX(1); }
.maddeler .etki { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--p-murekkep-3); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .maddeler button:hover { color: var(--p-murekkep); } }
.ayrinti {
  padding: 18px 0 8px 24px; margin-top: 6px; border-left: 1px solid var(--p-cizgi);
}
.ayrinti-ic { transition: opacity .25s ease, transform .25s var(--egri); }
.ayrinti-ic.degisiyor { opacity: 0; transform: translateY(6px); }
.ayrinti h4 { margin: 0 0 4px; font-size: 18px; font-weight: 680; letter-spacing: -.015em; line-height: 1.25; color: var(--p-murekkep); }
.ayrinti .ay-durum { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12.5px; color: var(--p-murekkep-3); }
.ayrinti dl { margin: 0; display: grid; gap: 12px; }
.ayrinti dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-stretch: 90%; color: var(--p-murekkep-3); }
.ayrinti dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--p-murekkep-2); }
.madde-detay { display: none; }

.p-dip { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--p-cizgi); display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--p-murekkep-3); }


/* ---------- paketler ---------- */
.paketler { display: grid; grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--cizgi-guclu); }
.paket { position: relative; padding: 24px 28px 28px 0; display: flex; flex-direction: column; }
.paket + .paket { padding-left: 28px; border-left: 1px solid var(--cizgi); }
.paket::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--murekkep);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--egri);
}
@media (hover: hover) and (pointer: fine) { .paket:hover::before { transform: scaleX(1); } }
.paket .tur { margin: 0 0 30px; font-size: 12.5px; font-weight: 560; letter-spacing: .06em; text-transform: uppercase; font-stretch: 90%; color: var(--murekkep-3); }
.paket h3 { margin: 0; font-size: 23px; font-weight: 700; font-stretch: 102%; letter-spacing: -.025em; line-height: 1.1; }
.paket p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--murekkep-2); }
.paket ul { list-style: none; margin: 18px 0 0; padding: 0; }
.paket li { position: relative; padding: 8px 0 8px 18px; border-top: 1px solid var(--cizgi); font-size: 14.5px; line-height: 1.45; color: var(--murekkep-2); }
.paket li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--murekkep-3); }

/* ---------- geçiş ---------- */
.gecis { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cizgi-guclu); border-bottom: 1px solid var(--cizgi); }
.gecis a { position: relative; display: block; padding: 28px 0 30px; text-decoration: none; overflow: hidden; }
.gecis a + a { text-align: right; border-left: 1px solid var(--cizgi); }
.gecis .yon { display: block; font-size: 13px; font-weight: 560; letter-spacing: .07em; text-transform: uppercase; font-stretch: 88%; color: var(--murekkep-3); }
.gecis .ad { display: block; margin-top: 10px; font-weight: 740; font-stretch: 110%; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; letter-spacing: -.04em; transition: transform .4s var(--egri); }
.gecis .ad b { font-weight: 220; color: var(--imza); margin-right: .25em; }
[data-theme^="sb"] .gecis .ad b { color: var(--murekkep-3); }
.gecis .ne { display: block; margin-top: 10px; font-size: 14.5px; color: var(--murekkep-3); }
.gecis a:first-child { padding-right: 28px; }
.gecis a + a { padding-left: 28px; }
@media (hover: hover) and (pointer: fine) {
  .gecis a:first-child:hover .ad { transform: translateX(-8px); }
  .gecis a + a:hover .ad { transform: translateX(8px); }
}
.diger { margin-top: 30px; }
.diger .serit { border-top: 1px solid var(--cizgi); }
.serit a[aria-current="page"] .ad { color: var(--imza); }
[data-theme^="sb"] .serit a[aria-current="page"] .ad { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--murekkep); }
.serit a[aria-current="page"]::before { transform: scaleX(1); }

/* ---------- iletişim ---------- */
.iletisim {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: end;
  padding: 56px 0 64px;
}
.iletisim h2 { margin: 0; font-weight: 740; font-stretch: 108%; font-size: clamp(34px, 4vw, 58px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.iletisim h2 span { color: var(--imza); }
[data-theme^="sb"] .iletisim h2 span { color: inherit; font-weight: 300; }
.iletisim p { margin: 18px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--murekkep-2); max-width: 30em; }
.yollar { display: grid; border-top: 1px solid var(--cizgi-guclu); }
.yollar a {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.yollar a span { font-size: 13px; font-weight: 520; color: var(--murekkep-3); letter-spacing: .02em; }
.yollar a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--egri); }
@media (hover: hover) and (pointer: fine) { .yollar a:hover svg { transform: translate(3px, -3px); } }

/* ---------- alt bilgi ---------- */
.alt { border-top: 1px solid var(--cizgi); padding: 26px 0 34px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; font-size: 13.5px; color: var(--murekkep-3); }
.alt .logo-yazi, .alt .logo-eo { font-size: 20px; }
.alt a { color: var(--murekkep-2); text-decoration: none; }
.alt a:hover { color: var(--murekkep); }
.alt nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.alt .sag { margin-left: auto; }

/* ---------- hareket ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .bas h1, .js .bas .no { opacity: 0; transform: translateY(18px); }
  .js.hazir .bas h1, .js.hazir .bas .no { opacity: 1; transform: none; transition: opacity .7s var(--egri), transform .8s var(--egri); }
  .js.hazir .bas h1 { transition-delay: .06s; }
  .js .ozet, .js .bas-alt { opacity: 0; }
  .js.hazir .ozet, .js.hazir .bas-alt { opacity: 1; transition: opacity .6s var(--egri) .2s; }
  .js .belir { opacity: 0; transform: translateY(16px); }
  .js .belir.gorundu { opacity: 1; transform: none; transition: opacity .6s var(--egri), transform .7s var(--egri); }
}

/* ---------- daha dar ekranlar ---------- */
@media (max-width: 1100px) {
  .tezgah { grid-template-columns: 1fr; }
  .yan { border-left: 0; border-top: 1px solid var(--cizgi-guclu); }
  .paketler { --sutun: 2 !important; }
  .paket:nth-child(odd) { padding-left: 0; border-left: 0; }
  .paket:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
}
@media (max-width: 900px) {
  .ozet, .bolum-bas, .iletisim { grid-template-columns: 1fr; gap: 28px; }
  .uclu { grid-template-columns: 1fr; }
  .uclu > section, .uclu > section + section { padding: 22px 0 6px; border-left: 0; }
  .uclu > section + section { border-top: 1px solid var(--cizgi-guclu); }
}
@media (max-width: 640px) {
  .bas { padding-top: 36px; }
  .bas-satir { flex-direction: column; align-items: flex-start; gap: 10px; }
  .no { font-size: 56px; }
  .bas h1 { font-size: clamp(40px, 12vw, 56px); line-height: .92; letter-spacing: -.04em; }
  .bas-alt { flex-direction: column; gap: 6px; font-size: 12px; margin-top: 18px; }
  .ozet { padding-top: 28px; }
  .ozet .giris { font-size: 19.5px; }
  .ozet .giris + .giris { font-size: 17px; }
  .tanimlar div { grid-template-columns: 1fr; gap: 6px; }
  .bolum { padding-top: 72px; }
  .bolum-bas { gap: 14px; }
  .bolum-bas p { font-size: 17px; }
  .tezgah::before, .tezgah::after { display: none; }
  .yan { padding: 22px 16px; }
  .yan h3 { font-size: 25px; }
  .yan-rakam .r { font-size: 25px; }
  .p-ozet { flex-direction: column; align-items: stretch; gap: 14px; }
  .liste-ayrinti { grid-template-columns: 1fr; min-height: 0; }
  .ayrinti { border-left: 0; border-top: 1px solid var(--p-cizgi); padding: 16px 0 4px; margin-top: 0; }
  .p-sekmeler { overflow-x: auto; scrollbar-width: none; }
  .maddeler button::after { display: none; }
  .p-sekmeler button { white-space: nowrap; font-size: 14px; }
  .p-dip { flex-direction: column; gap: 4px; }
  .paketler { --sutun: 1 !important; }
  .paket, .paket + .paket { padding: 22px 0 24px; border-left: 0; }
  .paket + .paket { border-top: 1px solid var(--cizgi); }
  .paket .tur { margin-bottom: 14px; }
  .gecis { grid-template-columns: 1fr; }
  .gecis a, .gecis a + a, .gecis a:first-child { padding: 20px 0 22px; text-align: left; border-left: 0; }
  .gecis a + a { border-top: 1px solid var(--cizgi); }
  .yollar a { grid-template-columns: 82px 1fr auto; font-size: 16px; }
  .alt .sag { margin-left: 0; }
}

/* =====================================================================
   Sayfaya özgü paneller
   ===================================================================== */
.bas + .bolum { padding-top: 84px; }
.tanimlar.uzun div { grid-template-columns: 168px 1fr; padding: 12px 0 13px; }
.tanimlar.uzun dt { font-size: 18px; font-weight: 680; font-stretch: 100%; letter-spacing: -.015em; line-height: 1.3; }
.maddeler.numarali button { grid-template-columns: 24px 1fr auto; }
.p-alt-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p-cizgi); }
.p-alt-iki h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-stretch: 90%; color: var(--p-murekkep-3); }
.p-alt-iki p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--p-murekkep-2); }
.ayrinti.alt { border-left: 0; border-top: 1px solid var(--p-cizgi); padding: 16px 0 4px; margin-top: 18px; min-height: 150px; }
.ayrinti.alt dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.etiket { display: inline-block; font-size: 11.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; font-stretch: 90%; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--p-murekkep-3); color: var(--p-murekkep-2); white-space: nowrap; }
.etiket.dolu { background: var(--p-murekkep); border-color: var(--p-murekkep); color: var(--p-zemin); }

/* numaralı işaret (görsel üstündeki noktalar) */
.isaret {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--p-zemin); color: var(--p-murekkep); border: 1.5px solid var(--p-murekkep-2);
  transition: background-color .2s, color .2s, transform .2s var(--egri);
}
.isaret[aria-pressed="true"] { background: var(--p-murekkep); color: var(--p-zemin); border-color: var(--p-murekkep); transform: scale(1.12); }
@media (hover: hover) and (pointer: fine) { .isaret:hover { border-color: var(--p-murekkep); } }
.maddeler .no-k { font-size: 12px; font-weight: 700; color: var(--p-murekkep-3); font-variant-numeric: tabular-nums; }

/* ---------- 05 agent akışı ---------- */
.akis { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; }
.akis > li { position: relative; }
.akis > li + li::before { content: ""; position: absolute; left: -30px; top: 50px; width: 30px; height: 1px; background: var(--p-murekkep-3); }
.akis > li + li::after { content: ""; position: absolute; left: -7px; top: 46px; border: 4.5px solid transparent; border-left: 6px solid var(--p-murekkep-3); border-right: 0; }
.dugum {
  width: 100%; height: 100%; min-height: 168px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 16px; border: 1px solid var(--p-cizgi); border-radius: 4px;
  background: color-mix(in srgb, var(--p-zemin) 55%, transparent); color: var(--p-murekkep-2);
  transition: border-color .2s, background-color .2s, color .2s;
}
.dugum .adim-no { font-size: 12px; font-weight: 600; color: var(--p-murekkep-3); font-variant-numeric: tabular-nums; }
.dugum .ad { font-size: 16px; font-weight: 680; line-height: 1.2; letter-spacing: -.01em; color: var(--p-murekkep); }
.dugum .ne { font-size: 13px; line-height: 1.4; }
.dugum .etiket { align-self: flex-start; margin-top: auto; }
.dugum[aria-pressed="true"] { border-color: var(--p-murekkep); background: color-mix(in srgb, var(--p-seri) 16%, var(--p-zemin)); color: var(--p-murekkep); }
@media (hover: hover) and (pointer: fine) { .dugum:hover { border-color: var(--p-murekkep-2); } }
.donus { /* kontrol edenden işi yapana dönen kesikli yol */
  position: relative; height: 30px; margin: 0 calc(37.5% + 0px) 0 calc(37.5% - 0px);
  border: 1px dashed var(--p-murekkep-3); border-top: 0; border-radius: 0 0 10px 10px;
}
.donus span { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 8px; background: var(--p-zemin); font-size: 12px; color: var(--p-murekkep-2); white-space: nowrap; }
.donus::before { content: ""; position: absolute; left: -5px; top: -3px; border: 4.5px solid transparent; border-bottom: 6px solid var(--p-murekkep-3); border-top: 0; }

/* ---------- 03 telefon ve mağaza sayfası ---------- */
.telefon-sira { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 30px; margin-top: 18px; align-items: start; }
.telefon {
  position: relative; height: 478px; padding: 16px 14px; border: 1.5px solid var(--p-murekkep-3); border-radius: 34px;
  background: color-mix(in srgb, var(--p-zemin) 70%, transparent);
}
.telefon::before { content: ""; position: absolute; top: 9px; left: 50%; width: 64px; height: 5px; margin-left: -32px; border-radius: 3px; background: var(--p-cizgi); }
.magaza { position: relative; height: 100%; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.m-ust { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.m-ikon { width: 58px; height: 58px; border-radius: 14px; background: var(--p-seri); }
.cubuk { display: block; height: 8px; border-radius: 4px; background: var(--p-cizgi); }
.cubuk.koyu { background: var(--p-murekkep-3); height: 10px; }
.cubuk + .cubuk { margin-top: 7px; }
.m-dugme { height: 24px; width: 70px; border-radius: 12px; background: var(--p-seri); margin-top: 9px; }
.m-puan { display: flex; gap: 16px; padding: 8px 0; border-block: 1px solid var(--p-cizgi); }
.m-puan span { flex: 1; }
.m-goruntu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.m-goruntu span { height: 150px; border-radius: 8px; border: 1px solid var(--p-cizgi); background: linear-gradient(180deg, color-mix(in srgb, var(--p-seri) 26%, transparent), transparent 75%); }
.m-goruntu span:first-child { background: linear-gradient(180deg, color-mix(in srgb, var(--p-seri) 44%, transparent), transparent 80%); }
.m-metin .cubuk { height: 6px; }
.m-banner { height: 92px; border-radius: 8px; border: 1px solid var(--p-cizgi); background: radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--p-seri) 45%, transparent), transparent 75%); }
.m-dugme.genis { width: 100%; height: 28px; border-radius: 6px; margin: 0; }
.m-goruntu.kisa span { height: 112px; }
.telefon-yan .maddeler button { padding-block: 9px; font-size: 14px; }
.telefon-yan .ayrinti { border-left: 0; border-top: 1px solid var(--p-cizgi); padding: 14px 0 0; margin-top: 12px; min-height: 200px; }

/* ---------- 07 ürün sayfası çizimi ---------- */
.urun-sira { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; margin-top: 18px; align-items: start; }
.tarayici { position: relative; border: 1px solid var(--p-murekkep-3); border-radius: 6px; padding: 10px; background: color-mix(in srgb, var(--p-zemin) 70%, transparent); }
.tarayici .adres { height: 18px; border-radius: 9px; background: var(--p-cizgi); margin-bottom: 12px; }
.u-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.u-gorsel { height: 190px; border-radius: 4px; border: 1px solid var(--p-cizgi); background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--p-seri) 30%, transparent), transparent 70%); }
.u-kucuk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }
.u-kucuk span { height: 30px; border-radius: 3px; border: 1px solid var(--p-cizgi); }
.u-bilgi { display: flex; flex-direction: column; gap: 9px; }
.u-fiyat { height: 16px; width: 55%; border-radius: 3px; background: var(--p-murekkep-2); }
.u-secenek { display: flex; gap: 5px; }
.u-secenek span { width: 26px; height: 20px; border-radius: 3px; border: 1px solid var(--p-murekkep-3); }
.u-sepet { height: 30px; border-radius: 4px; background: var(--p-seri); }
.u-alt { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--p-cizgi); }
.u-sekme { display: flex; gap: 10px; margin-bottom: 8px; }
.u-sekme span { width: 54px; height: 8px; border-radius: 4px; background: var(--p-cizgi); }
.u-sekme span:first-child { background: var(--p-murekkep-3); }

/* ---------- 06 kod inceleme ---------- */
.kod-sira { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.kod {
  margin: 0; border: 1px solid var(--p-cizgi); border-radius: 4px; overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.75;
  background: color-mix(in srgb, var(--p-zemin) 75%, transparent);
}
.kod-dosya { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--p-cizgi); font-family: var(--grotesk); font-size: 12px; color: var(--p-murekkep-3); }
.kod ol { list-style: none; margin: 0; padding: 6px 0; counter-reset: k; }
.kod li { counter-increment: k; position: relative; display: grid; grid-template-columns: 36px 1fr; padding-right: 32px; color: var(--p-murekkep-2); white-space: pre; overflow: hidden; }
.kod li::before { content: counter(k); text-align: right; padding-right: 12px; color: var(--p-murekkep-3); }
.kod li.isli { background: color-mix(in srgb, var(--p-seri) 9%, transparent); }
.kod li.isli.secili { background: color-mix(in srgb, var(--p-seri) 24%, transparent); color: var(--p-murekkep); }
.kod li .isaret { right: 6px; top: 50%; left: auto; width: 20px; height: 20px; margin: -10px 0 0; font-size: 11px; font-family: var(--grotesk); }
.kod .y { color: var(--p-murekkep-3); }
.kod .s { color: var(--p-murekkep); }
.onem { display: inline-block; min-width: 26px; text-align: center; font-size: 11.5px; font-weight: 700; padding: 2px 5px; border-radius: 3px; border: 1px solid var(--p-murekkep-3); color: var(--p-murekkep-2); }
.onem.p0 { background: var(--p-murekkep); border-color: var(--p-murekkep); color: var(--p-zemin); }
.onem.p1 { border-color: var(--p-murekkep); color: var(--p-murekkep); }

/* ---------- 01 birim ekonomisi şelalesi ---------- */
.selale { position: relative; height: 250px; margin-top: 30px; padding-bottom: 48px; border-bottom: 1px solid var(--p-cizgi); }
.selale-ic { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; border-bottom: 1px solid var(--p-murekkep-3); }
.selale-ic > div { position: relative; }
.selale .bar {
  position: absolute; left: 12%; right: 12%; bottom: calc(var(--alt) * 1%); height: calc(var(--boy) * 1%);
  border: 1px solid var(--p-seri); border-radius: 2px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--p-seri) 30%, transparent) 0 4px, transparent 4px 8px);
}
.selale .ana .bar { background: var(--p-seri); }
.selale .deg { position: absolute; left: -6px; right: -6px; bottom: calc((var(--alt) + var(--boy)) * 1% + 6px); text-align: center; font-size: 13px; font-weight: 680; color: var(--p-murekkep); font-variant-numeric: tabular-nums; }
.selale .ad { position: absolute; left: -6px; right: -6px; top: calc(100% + 8px); text-align: center; font-size: 12px; line-height: 1.25; color: var(--p-murekkep-2); }
@media (prefers-reduced-motion: no-preference) {
  .selale .bar { animation: boy-gel .6s var(--egri) both; transform-origin: bottom; }
  @keyframes boy-gel { from { transform: scaleY(.2); opacity: 0; } }
}

/* ---------- 04 huni ---------- */
.huni { list-style: none; margin: 18px 0 0; padding: 0; }
.huni button {
  width: 100%; display: grid; grid-template-columns: 150px 1fr 96px; gap: 14px; align-items: center; cursor: pointer;
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--p-cizgi); background: none; text-align: left; color: var(--p-murekkep-2); font-size: 14px;
}
.huni .yol { position: relative; height: 26px; }
.huni .dolu { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); background: color-mix(in srgb, var(--p-seri) 38%, transparent); border: 1px solid var(--p-seri); border-radius: 2px; transition: background-color .2s; }
.huni .kayip { position: absolute; top: 0; bottom: 0; left: calc(var(--w) * 1%); width: calc(var(--k) * 1%); border: 1px dashed var(--p-murekkep-3); border-left: 0; border-radius: 0 2px 2px 0; }
.huni .say { text-align: right; font-weight: 640; color: var(--p-murekkep); font-variant-numeric: tabular-nums; }
.huni .say small { display: block; font-weight: 500; font-size: 12px; color: var(--p-murekkep-3); }
.huni button[aria-pressed="true"] { color: var(--p-murekkep); font-weight: 600; }
.huni button[aria-pressed="true"] .dolu { background: var(--p-seri); }
.deney-kayit { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 13.5px; }
.deney-kayit caption { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--p-murekkep-2); padding-bottom: 8px; }
.deney-kayit th { text-align: left; font-size: 12px; font-weight: 600; color: var(--p-murekkep-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--p-cizgi); }
.deney-kayit td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--p-cizgi); color: var(--p-murekkep-2); vertical-align: top; }
.deney-kayit td:last-child { white-space: nowrap; color: var(--p-murekkep); font-weight: 600; }

/* ---------- 08 ses tonu ---------- */
.ton-sira { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; margin-top: 18px; align-items: start; }
.ton-cikti { min-height: 226px; padding: 22px 24px; border: 1px solid var(--p-cizgi); border-radius: 4px; background: color-mix(in srgb, var(--p-zemin) 60%, transparent); }
.ton-cikti .kim { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-stretch: 90%; color: var(--p-murekkep-3); }
.ton-cikti blockquote { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.38; color: var(--p-murekkep); text-wrap: pretty; transition: opacity .18s ease; }
.ton-cikti blockquote.degisiyor { opacity: 0; }
.ton-ayar { display: grid; gap: 22px; }
.ton-ayar label { display: block; font-size: 13px; font-weight: 600; color: var(--p-murekkep); margin-bottom: 8px; }
.ton-ayar .uclar { display: flex; justify-content: space-between; font-size: 12px; color: var(--p-murekkep-3); margin-top: 4px; }
.ton-ayar input[type="range"] { width: 100%; accent-color: var(--p-seri); margin: 0; height: 22px; }
.ton-kural { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--p-murekkep-2); }

@media (max-width: 1240px) {
  .akis { column-gap: 22px; }
  .akis > li + li::before { left: -22px; width: 22px; }
}
@media (max-width: 760px) {
  .akis { grid-template-columns: 1fr; row-gap: 22px; }
  .akis > li + li::before { left: 22px; top: -22px; width: 1px; height: 22px; }
  .akis > li + li::after { left: 18px; top: -7px; border: 4.5px solid transparent; border-top: 6px solid var(--p-murekkep-3); border-bottom: 0; }
  .dugum { min-height: 0; }
  .donus { display: none; }
  .telefon-sira, .urun-sira, .kod-sira, .ton-sira { grid-template-columns: 1fr; }
  .telefon { width: 262px; margin-inline: auto; }
  .ayrinti.alt dl { grid-template-columns: 1fr; }
  .p-alt-iki { grid-template-columns: 1fr; }
  .huni button { grid-template-columns: 92px 1fr 70px; gap: 8px; font-size: 13px; }
  .selale-ic { gap: 5px; }
  .selale .ad { font-size: 11px; left: -3px; right: -3px; }
  .selale .deg { font-size: 11.5px; }
  .ton-cikti blockquote { font-size: 20px; }
  .kod { font-size: 11px; }
  .kod li { grid-template-columns: 26px 1fr; padding-right: 28px; white-space: pre-wrap; }
  .kod li code { overflow-wrap: anywhere; padding-left: 1.2em; text-indent: -1.2em; }
  .kod li::before { padding-right: 8px; }
  .deney-kayit { font-size: 12.5px; }
}