/* ==========================================================================
   KasaGo — kullanım kılavuzu (/kilavuz) · canon W-52, W-53
   Loaded after styles.css on the guide pages and /yardim. It holds just what
   styles.css has no component for; colours, type and easing are tokens.css.
   Reused as they are: .bhead .crumbs h1 · .answer/.alab (Kısaca) · .toc/.lab
   (İçindekiler) · .body · .steps · .tip (aside.note) · .tablewrap/.tablescroll
   · .figframe + figcaption · .faq · .rlgrid/.rlcard · .updated · .ctaband ·
   .hgroup/.hgrid/.hcard (hub cards).
   Frame (W-53): the whole guide as a tree in a sticky left column (≥1024 px),
   the reading column, and İçindekiler in a sticky right column (≥1200 px).
   Below those widths both become closed menus above the body (.kv-mnav).
   ========================================================================== */

/* ---------- page frame ---------- */
.kv-head .ph-in{max-width:1200px}
.kv-layout{max-width:1200px; margin:0 auto; padding:26px 20px 0}
.kv-main{min-width:0}
.kv-main > *{max-width:760px}
.kv-hub > .hgroup{max-width:none}

/* ---------- Kısaca: the .answer box holding a three-item list ---------- */
.kv-kisaca ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.kv-kisaca li{position:relative; padding-left:22px; font-size:16.5px; line-height:1.6; color:var(--ink)}
.kv-kisaca li::before{content:""; position:absolute; left:5px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--purple)}
.kv-hub .kv-kisaca{margin-bottom:40px}

/* ---------- the guide tree (W-53): hub · four groups · every page ---------- */
.kv-tree-home{display:flex; align-items:center; gap:9px; margin:0 0 2px; padding:8px 10px; border-radius:10px;
  font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.3; color:var(--ink); text-decoration:none}
.kv-tree-home svg{flex:none; color:var(--purple)}
.kv-tree-list, .kv-tree-list ul{list-style:none; margin:0; padding:0}
.kv-tree-glab{display:block; padding:14px 10px 6px; font-size:11.5px; font-weight:700; line-height:1.3;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600)}
.kv-tree-list ul{margin-left:10px; border-left:1px solid var(--gray-200)}           /* the tree's guide line */
.kv-tree-list ul a{display:block; margin-left:-1px; padding:6px 10px 6px 14px; border-left:2px solid transparent;
  border-radius:0 8px 8px 0; font-size:14px; line-height:1.45; color:var(--read); text-decoration:none}
.kv-tree a{transition:background-color .15s var(--ease), color .15s var(--ease)}
.kv-tree a:hover{color:var(--purple-700); background:var(--gray-50)}
.kv-tree a[aria-current="page"]{color:var(--purple-700); background:var(--purple-50); font-weight:600}
.kv-tree-list a[aria-current="page"]{border-left-color:var(--purple)}
.kv-side{display:none}

/* ---------- below 1200 px: the tree and İçindekiler as two closed menus above the body ---------- */
.kv-mnav{margin:0 0 34px; border:1px solid var(--gray-200); border-radius:18px; background:var(--gray-50)}
.kv-mnav > details{padding:0 20px}
.kv-mnav > details + details{border-top:1px solid var(--gray-200)}
.kv-mnav .toc{margin:0; background:none; border:0; border-radius:0}
.kv-mnav summary.lab{display:flex; align-items:center; justify-content:space-between; min-height:52px; margin:0;
  cursor:pointer; list-style:none; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-600)}
.kv-mnav summary::-webkit-details-marker{display:none}
.kv-mnav summary::after{content:""; width:8px; height:8px; margin:0 4px 4px 0; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--ease)}
.kv-mnav details[open] > summary::after{margin-bottom:0; margin-top:4px; transform:rotate(-135deg)}
.kv-mnav details[open]{padding-bottom:14px}
.kv-treem .kv-tree{margin:0 -10px}
.kv-treem .kv-tree-home{display:none}               /* the menu is already titled; the breadcrumb links the hub */
.kv-toc{display:none}
@media (max-width:1023.98px){
  .kv-treem .kv-tree-list a{min-height:40px; display:flex; align-items:center}         /* tap targets (§9.8) */
}
@media (max-width:640px){                            /* 40px İçindekiler rows (styles.css T17): number on the first line */
  .kv-mnav .toc a{align-items:flex-start; padding:9px 0}
  .kv-mnav .toc li{margin-bottom:0}
  .kv-mnav .toc li::before{top:10px}
}

/* ---------- ≥1024 px: the tree in a sticky left column ---------- */
@media (min-width:1024px){
  .kv-head .ph-in{padding-left:296px}               /* 20 gutter + 236 tree + 40 gap: the title sits on the reading column */
  .kv-layout{display:grid; grid-template-columns:236px minmax(0,1fr); column-gap:40px; align-items:start}
  /* the source order is content-first (h1 → Kısaca → body, then the navigation: AEO); the grid places the columns */
  .kv-main{grid-column:2; grid-row:1}
  .kv-side{grid-column:1; grid-row:1}
  .kv-side{display:block; position:sticky; top:94px; max-height:calc(100vh - 118px); overflow-y:auto;
    overscroll-behavior:contain; scrollbar-width:thin; margin-left:-10px; padding:0 4px 24px 0}
  .kv-treem{display:none}
  .kv-mnav > details + details{border-top:0}         /* only İçindekiler is left in the box */
  .kv-hub .hgrid{grid-template-columns:1fr 1fr}
}

/* ---------- ≥1200 px: İçindekiler in a sticky right column ---------- */
@media (min-width:1200px){
  .kv-head .ph-in{padding-left:292px}               /* 20 + 236 + 36 */
  .kv-layout{grid-template-columns:236px minmax(0,1fr) 204px; column-gap:36px}
  .kv-layout--hub{grid-template-columns:236px minmax(0,1fr)}
  .kv-mnav{display:none}
  .kv-hub .hgrid{grid-template-columns:1fr 1fr 1fr}
  .toc.kv-toc{grid-column:3; grid-row:1; display:block; position:sticky; top:94px; max-height:calc(100vh - 118px); overflow-y:auto;
    overscroll-behavior:contain; scrollbar-width:thin; margin:0; padding:16px 14px 12px 16px}
  .kv-toc .lab{margin-bottom:11px}
  .kv-toc ol{columns:1}
  .kv-toc li{margin-bottom:8px; padding-left:22px}
  .kv-toc li::before{width:16px}
  .kv-toc a{display:block; font-size:13.5px; line-height:1.45}
}

/* ---------- body ---------- */
.kv-body > section:first-child > h2:first-child{margin-top:6px}
/* <strong> is always an on-screen label in the guide (HANDOFF §2), never emphasis */
.kv-body strong{font-weight:600; color:var(--ink); background:var(--purple-50); box-shadow:inset 0 0 0 1px var(--purple-100);
  border-radius:5px; padding:.04em .24em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
/* plain numbered lists (ol without .steps) */
.kv-body ol:not(.steps){margin:0 0 22px; padding-left:26px}
.kv-body ol:not(.steps) > li{margin-bottom:10px; padding-left:6px; color:var(--read); font-size:17px; line-height:1.72}
.kv-body ol:not(.steps) > li::marker{color:var(--purple-700); font-weight:700}
/* tables: the first column is a row header; .tablescroll scrolls sideways on phones */
.kv-body .tablewrap{margin:0 0 22px}
.kv-body tbody th{text-align:left; font-weight:600; color:var(--ink); padding:13px 16px; border-bottom:1px solid var(--line);
  background:#fff; position:sticky; left:0; min-width:9em; box-shadow:inset -1px 0 0 var(--line)}
.kv-body thead th:first-child{position:sticky; left:0; z-index:1; box-shadow:inset -1px 0 0 var(--gray-200)}
@media (min-width:600px){ .kv-body tbody th{min-width:11.5em} }
.kv-body tbody td:first-child{font-weight:400; color:var(--read)}
.kv-body tbody tr:last-child th{border-bottom:none}
/* figures on the .figframe ground; a tap opens the large file; phone shots capped and centred */
.kv-body .figframe{cursor:zoom-in}
.kv-fig--phone{max-width:380px; margin-left:auto; margin-right:auto}
/* aside.legal — the disclaimer box (aside.note is the .tip component as it is) */
.tip.legal{background:#fff; border-left:4px solid var(--slate-600)}
.tip.legal .tic{color:var(--slate-600)}
.tip.legal p{color:var(--read) !important}

/* ---------- after the body: SSS · İlgili sayfalar · Önceki / Sonraki ---------- */
.kv-faq > h2, .kv-rel > h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.5vw,27px);
  line-height:1.24; letter-spacing:-.5px; margin:50px 0 16px}
.kv-rel .rlgrid{grid-template-columns:1fr; max-width:none; margin-inline:0}
@media (min-width:720px){ .kv-rel .rlgrid{grid-template-columns:repeat(3,1fr)} }
.kv-rel .rlcard{align-items:flex-start}
.kv-pn{display:grid; gap:12px; margin-top:36px}
@media (min-width:600px){ .kv-pn{grid-template-columns:1fr 1fr} }
.kv-pn .kv-next{grid-column:-2; justify-content:flex-end; text-align:right}
.kv-pn .rltx > span{display:flex; align-items:center; gap:6px; margin:0 0 3px}
.kv-pn .kv-next .rltx > span{justify-content:flex-end}

/* ---------- /yardim: the Kullanım kılavuzu section (the generator's block) ---------- */
.kv-yardim{background:var(--purple-50); border:1px solid var(--purple-100); border-radius:20px; padding:24px 18px 8px; margin:0 0 40px}
.kv-yardim-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-.4px; margin:0 0 8px}
.kv-yardim-head p{margin:0 0 22px; max-width:62ch; color:var(--read); font-size:16px; line-height:1.6}
.kv-yardim-head a{color:var(--purple-700); font-weight:600; text-underline-offset:3px}
.kv-yardim .hgroup{margin:0 0 20px}
.kv-yardim .hgroup > h3{font-family:var(--font-display); font-weight:600; font-size:17px; margin:0 0 12px; color:var(--ink)}
@media (min-width:768px){ .kv-yardim{padding:30px 28px 12px} }