/* site-ana.css: tanitim sayfalarinin alt bolumleri (scplojistik.com.tr, navlun.pro, hafriyat.pro).
   Belirtecler kurumsal.css'teki --s-* ailesi ve panelin belirtecleridir; yeni renk ve yazi tipi yok
   (PO 04.11). PO 05.11 Irsaliye Kocani: kagit, kobalt murekkep, kesik cizgi, nusha yigini, soru balonu
   (Madde 48). Ilk ekran site-sohbet.css. Her bolum ust bant disinda bir ekran, icerik sigmazsa bolum
   buyur. Ardisik iki bolum ayni duzende kurulmaz. Hareket yalniz transform ve opacity; azaltilmis
   harekette hic yok. Kaydirma yakalamasi yok: kucuk tekerlek adimini bolum basina geri cekiyordu
   (05.11 olcum). */

/* ---- Iskelet ---- */
.s-kap { inline-size: 100%; max-inline-size: calc(var(--s-kap) + 2 * var(--s-kenar)); margin-inline: auto; padding-inline: var(--s-kenar); }
.s-izgara {
  display: grid;
  grid-template-columns:
    [tam-bas] minmax(calc(var(--s-kenar) - var(--s-g-kutu-1)), 1fr)
    [kap-bas] repeat(12, minmax(0, calc((var(--s-kap) - 11 * var(--s-g-kutu-1)) / 12)))
    [kap-son] minmax(calc(var(--s-kenar) - var(--s-g-kutu-1)), 1fr) [tam-son];
  column-gap: var(--s-g-kutu-1);
}
.s-ekran {
  position: relative; overflow-x: clip;
  display: grid; align-content: center;
  min-block-size: calc(100vh - var(--s-ust-h));
  min-block-size: calc(100dvh - var(--s-ust-h));
  padding-block: clamp(48px, 9vh, 96px);
  scroll-margin-block-start: var(--s-ust-h);
}
.s-ekran h2 { margin: 0; font-size: var(--s-fs-h2); line-height: 1.02; color: var(--s-murekkep); text-wrap: balance; }
.s-ekran h3 { font-size: var(--fs-20); font-weight: 600; color: var(--s-murekkep); }
.s-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--s-g-kutu-1); }
.s-dev { margin: 0; font-size: var(--s-fs-dev); line-height: 0.96; letter-spacing: -0.005em; color: var(--s-buz); text-wrap: balance; }
.s-dev span { display: block; color: var(--s-turkuaz); }

/* Soru balonu: her bolum ziyaretcinin sorusuyla baslar. */
.s-ekran p.s-soru { inline-size: fit-content; margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs); background: var(--brand); color: var(--on-brand); font-size: var(--fs-16); font-weight: 500; }

/* ---- Urun sitelerinin bolumleri ---- */
.s-bolum-bas {
  display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-g-kutu-1);
  margin-block-end: var(--s-g-kutu-3);
}
.s-bolum-bas p { margin: 0; max-inline-size: 44ch; font-size: var(--s-fs-govde); color: var(--s-soluk); }
.s-ust-etiket { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.s-no { display: inline-block; margin: 0; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.s-no::before { content: "No "; }

/* Uclu: kesik ust cizgili uc not. */
.s-uclu {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-g-kutu-2);
  inline-size: 100%; margin: var(--s-g-kutu-2) 0 var(--sp-4); padding: 0; list-style: none; text-align: start;
}
.s-uclu li { padding-block-start: var(--sp-4); border-block-start: 1px dashed var(--border-strong); }
.s-uclu p { margin: var(--sp-2) 0; color: var(--s-soluk); }
.s-uclu a { display: inline-flex; align-items: center; min-block-size: var(--sp-8); font-weight: 600; color: var(--brand); }

/* Numarali madde listesi. */
.s-maddeler { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.s-maddeler li { padding-block: var(--sp-3); border-block-start: 1px dashed var(--border-strong); }
.s-maddeler h3 { margin-block: var(--sp-1); }
.s-maddeler p { margin: var(--sp-1) 0 0; color: var(--s-soluk); }

/* Ekran gorseli: adres cubuklu nusha. */
.s-cerceve {
  overflow: hidden; background: var(--s-kagit); border: 1px solid var(--border);
  box-shadow: 6px 6px 0 -1px var(--brand-tint), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--bg-inset), 12px 12px 0 0 var(--border);
}
.s-cerceve-ust {
  display: flex; align-items: center; gap: var(--sp-2);
  block-size: var(--sp-10); padding-inline: var(--sp-4);
  background: var(--bg-subtle); border-block-end: 1px dashed var(--border-strong);
}
.s-cerceve-ust span { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--border-strong); }
.s-cerceve-ust p { margin: 0 0 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.s-cerceve img { display: block; inline-size: 100%; block-size: auto; }

.s-bolunmus { align-items: center; row-gap: var(--s-g-kutu-2); }
.s-bolunmus-gorsel { margin: 0; }
.s-bolunmus-gorsel.s-sag { grid-column: 7 / tam-son; grid-row: 1; }
.s-bolunmus-gorsel.s-sag .s-cerceve { border-inline-end: 0; }
.s-bolunmus-gorsel.s-sol { grid-column: tam-bas / 8; grid-row: 1; }
.s-bolunmus-gorsel.s-sol .s-cerceve { border-inline-start: 0; }
.s-bolunmus-metin > p:not(.s-ust-etiket):not(.s-soru) { margin: var(--sp-4) 0 var(--s-g-kutu-1); font-size: var(--s-fs-govde); color: var(--s-soluk); }

.s-bant-bas { display: grid; justify-items: start; margin-block-end: var(--s-g-kutu-1); }
.s-bant-bas > p:not(.s-ust-etiket):not(.s-soru) { margin: var(--sp-4) 0 0; max-inline-size: 56ch; font-size: var(--s-fs-govde); color: var(--s-soluk); }
.s-bant-bas .s-bag { margin-block-start: var(--sp-1); }

/* Bir gun: kobalt blok, kocan biletleri. */
.s-akis { --s-odak: var(--on-brand); background: var(--brand); color: var(--on-brand); }
.s-akis h2, .s-akis .s-bolum-bas p { color: var(--on-brand); }
.site .s-akis .s-bag { color: var(--on-brand); }
.s-ekran.s-akis p.s-soru { background: var(--s-kagit); color: var(--brand); }
.s-zincir { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 var(--s-g-kutu-2); padding: 0; list-style: none; }
.s-zincir li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--s-kagit); color: var(--s-murekkep); border-inline-end: 2px dashed var(--border-strong); }
.s-zincir li:last-child { border-inline-end: 0; }
.s-ekran .s-zincir h3 { margin: 0; font-size: var(--fs-18); color: var(--s-murekkep); }
.s-zincir p { margin: 0; font-size: var(--fs-14); color: var(--s-soluk); }

/* Kapanis: gece blogu. */
.s-kapanis { --s-odak: var(--s-turkuaz); padding-block: var(--s-g-makro-1) var(--s-g-kutu-3); background: var(--s-lacivert); color: var(--s-buz); }
.s-kapanis h2 { color: var(--s-buz); }
.s-ekran.s-kapanis h2 { max-inline-size: 20ch; font-size: clamp(44px, 5.6vw, 88px); line-height: 0.98; }
.s-ekran.s-kapanis p.s-soru { background: var(--s-turkuaz); color: var(--s-lacivert); }
.site .s-kapanis .s-bag { color: var(--s-buz); }
.s-kapanis-iletisim { margin: var(--s-g-kutu-1) 0 0; color: var(--s-buz-soluk); }
.site .s-kapanis-iletisim a { color: var(--s-buz); }

/* ---- Ana sayfa: kocan dili. Kagit, kobalt murekkep, kesik cizgi, nusha yigini, delik ---- */
.kc-z-kagit { background: var(--s-kagit); }
.kc-z-zemin { background: var(--s-zemin); }
.kc-z-mavi { background: var(--brand-tint); }
.kc-z-kobalt { background: var(--brand); color: var(--on-brand); --s-odak: var(--on-brand); }
.kc-z-gece { background: var(--s-lacivert); color: var(--s-buz); --s-odak: var(--s-turkuaz); }
.kc-iki { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-g-kutu-3); align-items: center; }
.kc-ayna { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kc-metin { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.kc-etk { margin: 0; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.kc-etiket { display: flex; }
.s-ekran .kc-metin h2, .s-ekran .kc-bant-bas h2 { color: var(--s-murekkep); }
.s-ekran .kc-h-buyuk { font-size: var(--s-fs-buyuk); line-height: 1; }
.s-ekran .kc-h-dev { font-size: clamp(48px, 7vw, 112px); line-height: 0.98; color: var(--brand); }
.kc-p { max-inline-size: 58ch; margin: 0; font-size: var(--s-fs-govde); color: var(--s-soluk); }
.kc-p-genis { margin-block: var(--sp-4) var(--sp-3); }
.kc-no { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.s-ekran .kc-maddeler h3, .s-ekran .kc-uclu h3 { margin: var(--sp-1) 0; }
.kc-maddeler { list-style: none; inline-size: 100%; margin: var(--sp-2) 0; padding: 0; }
.kc-maddeler li { padding-block: var(--sp-3); border-block-start: 1px dashed var(--border-strong); }
.kc-maddeler p, .kc-uclu p { margin: 0; color: var(--s-soluk); }
.kc-baglar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.kc-kopya { margin: 0; }
.kc-sekme { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 38px; padding-inline: var(--sp-3); background: var(--s-kagit); border: 1px solid var(--border); border-block-end: 0; border-radius: var(--r-md) var(--r-md) 0 0; font-size: var(--fs-14); font-weight: 600; color: var(--brand); }
.kc-kopya img { display: block; inline-size: 100%; block-size: auto; background: var(--s-kagit); border: 1px solid var(--border); box-shadow: 6px 6px 0 -1px var(--brand-tint), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--bg-inset), 12px 12px 0 0 var(--border); }
.kc-kirp img { block-size: min(58vh, 520px); object-fit: cover; object-position: top; }
.kc-bant { display: flex; flex-direction: column; gap: var(--s-g-kutu-2); }
.kc-bant-bas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-g-kutu-2); align-items: end; }
.kc-bant-bas .s-bag { margin-block-start: var(--sp-3); }
.kc-uclu { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-g-kutu-2); margin: var(--s-g-kutu-1) 0 0; padding: 0; }
.kc-uclu li { padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--border-strong); }
.kc-uclu a { display: inline-block; margin-block-start: var(--sp-2); color: var(--brand); }
.kc-sayfa { list-style: none; margin: 0; padding: var(--s-g-kutu-1) var(--s-g-kutu-1) var(--s-g-kutu-1) calc(var(--sp-6) + var(--sp-8)); background-color: var(--s-kagit); border: 1px solid var(--border); box-shadow: 6px 6px 0 -1px var(--brand-tint), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--bg-inset), 12px 12px 0 0 var(--border); background-image: radial-gradient(circle at 20px 16px, var(--s-zemin) 6px, var(--border) 6px 7px, transparent 7.5px); background-size: 40px 32px; background-repeat: repeat-y; }
.kc-z-kagit .kc-sayfa { background-color: var(--s-zemin); background-image: radial-gradient(circle at 20px 16px, var(--s-kagit) 6px, var(--border) 6px 7px, transparent 7.5px); }
.kc-konusma { display: flex; flex-direction: column; gap: var(--sp-5); }
.kc-k { inline-size: fit-content; max-inline-size: 90%; margin: 0 0 var(--sp-2) auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: var(--brand); color: var(--on-brand); font-weight: 500; }
.kc-c { inline-size: fit-content; max-inline-size: 90%; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs); background: var(--s-kagit); }
.kc-c p { margin: 0; }
.kc-kaynak { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.kc-kaynak .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.kc-kurallar li { padding-block: var(--s-g-kutu-1); border-block-end: 1px dashed var(--border-strong); }
.kc-kurallar li:first-child { padding-block-start: 0; }
.kc-kurallar li:last-child { padding-block-end: 0; border-block-end: 0; }
.s-ekran .kc-kurallar h3 { margin: var(--sp-1) 0; font-size: var(--fs-22); }
.kc-kurallar p { margin: 0; color: var(--s-soluk); }
.kc-bugun { padding-block: var(--s-g-kutu-2); background: var(--brand); color: var(--on-brand); }
.kc-bugun-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-g-kutu-2); align-items: end; }
.kc-bugun-ust { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-15); }
.kc-bugun h2 { margin: 0; font-family: var(--s-font-baslik); font-size: var(--s-fs-buyuk); font-weight: 600; line-height: 1; color: var(--on-brand); }
.kc-bugun-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.kc-bugun-nav a { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--sp-3); border: 1px solid var(--on-brand); border-radius: var(--r-md); color: var(--on-brand); font-size: var(--fs-14); font-weight: 500; text-decoration: none; }
.kc-bugun-nav a:hover { background: var(--on-brand); color: var(--brand); }
.kc-fisler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-g-kutu-1); margin-block-start: var(--s-g-kutu-2); }
.kc-fis { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: calc(var(--s-g-kutu-1) + 12px) var(--s-g-kutu-1) var(--s-g-kutu-1); background-color: var(--s-zemin); border: 1px solid var(--border); background-image: radial-gradient(circle at 12px 6px, var(--s-kagit) 4px, var(--border) 4px 5px, transparent 5.5px); background-size: 24px 12px; background-repeat: repeat-x; }
.s-ekran .kc-fis h3 { margin: 0; font-family: var(--s-font-baslik); font-size: var(--fs-36); line-height: 1; }
.kc-fis h3 a { color: var(--brand); text-decoration: none; }
.kc-fis > p { margin: 0; color: var(--s-soluk); }
.kc-moduller { list-style: none; display: grid; gap: var(--sp-1); inline-size: 100%; margin: var(--sp-2) 0; padding-block-start: var(--sp-3); padding-inline: 0; border-block-start: 1px dashed var(--border-strong); font-size: var(--fs-15); }
.kc-moduller li { display: flex; align-items: center; gap: var(--sp-2); }
.kc-moduller .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--ok-text); }
.kc-ek { margin: 0; font-size: var(--fs-14); color: var(--s-soluk); }
.kc-fis .s-bag { margin-block-start: auto; }
.kc-z-kobalt .s-ekran, .kc-z-kobalt h2, .s-ekran.kc-z-kobalt .kc-bant-bas h2 { color: var(--on-brand); }
.kc-z-kobalt .kc-p { color: var(--on-brand); }
.kc-z-kobalt .s-bag { color: var(--on-brand); }
.s-ekran.kc-z-kobalt p.s-soru { background: var(--s-kagit); color: var(--brand); }
.kc-biletler { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: var(--s-g-kutu-2) 0 var(--s-g-kutu-1); padding: 0; }
.kc-biletler li { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--s-kagit); color: var(--s-murekkep); border-inline-end: 2px dashed var(--border-strong); }
.kc-biletler li:last-child { border-inline-end: 0; }
.s-ekran .kc-biletler h3 { margin: 0; font-size: var(--fs-18); }
.kc-biletler p { margin: 0; font-size: var(--fs-14); color: var(--s-soluk); }
.kc-sayilar { display: grid; gap: var(--sp-4); }
.kc-sayilar li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding-block-end: var(--sp-4); border-block-end: 1px dashed var(--border-strong); }
.kc-sayilar li:last-child { padding-block-end: 0; border-block-end: 0; }
.kc-sayi { margin: 0; font-family: var(--font-mono); font-size: clamp(56px, 6vw, 88px); line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.s-ekran .kc-sayilar h3 { margin: 0 0 var(--sp-1); }
.kc-sayilar p:not(.kc-sayi) { margin: 0; color: var(--s-soluk); }
.kc-defter { margin: 0; background: var(--s-zemin); border: 1px solid var(--border); box-shadow: 6px 6px 0 -1px var(--brand-tint), 6px 6px 0 0 var(--border); }
.kc-defter > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; padding: var(--sp-4) var(--s-g-kutu-1); border-block-end: 1px dashed var(--border-strong); }
.kc-defter > div:last-child { border-block-end: 0; }
.kc-defter dt { font-family: var(--s-font-baslik); font-size: var(--fs-24); font-weight: 600; color: var(--brand); }
.kc-defter dd { margin: 0; color: var(--s-soluk); }
.kc-kategoriler { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-4); inline-size: 100%; margin: var(--sp-2) 0; padding: 0; font-size: var(--fs-15); }
.kc-kategoriler a { color: var(--s-murekkep); }
.kc-kategoriler span { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--brand); }
.kc-yazilar { list-style: none; margin: 0; padding: 0; }
.kc-yazilar li { padding-block: var(--s-g-kutu-1); border-block-start: 1px dashed var(--border-strong); }
.kc-yazilar li:last-child { border-block-end: 1px dashed var(--border-strong); }
.s-ekran .kc-yazilar h3 { margin: var(--sp-1) 0; font-family: var(--s-font-baslik); font-size: var(--fs-28); line-height: 1.1; font-weight: 600; }
.kc-yazilar h3 a { color: var(--s-murekkep); text-decoration: none; }
.kc-yazilar h3 a:hover { color: var(--brand); }
.kc-kunye { margin: 0; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--s-soluk); }
.kc-sss { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-g-kutu-3); align-items: start; }
.kc-sorular { display: flex; flex-direction: column; gap: var(--sp-2); }
.kc-sorular summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); inline-size: fit-content; max-inline-size: 92%; min-block-size: 48px; margin-inline-start: auto; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: var(--s-kagit); color: var(--s-murekkep); font-weight: 500; list-style: none; cursor: pointer; }
.kc-sorular summary::-webkit-details-marker { display: none; }
.kc-sorular summary .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--brand); }
.kc-sorular details[open] summary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.kc-sorular details[open] summary .icon { color: var(--on-brand); transform: rotate(45deg); }
.kc-sorular details p { inline-size: fit-content; max-inline-size: 86%; margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs); background: var(--s-kagit); color: var(--s-murekkep); }
.s-ekran.kc-z-gece h2 { font-size: clamp(48px, 7vw, 112px); line-height: 0.98; color: var(--s-buz); }
.s-ekran.kc-z-gece p.s-soru { background: var(--s-turkuaz); color: var(--s-lacivert); }
.kc-z-gece .s-eylem { margin-block-start: var(--sp-3); }
.kc-z-gece .kc-no { color: var(--s-turkuaz); }
.kc-z-gece .s-bag, .kc-k-not a { color: var(--s-turkuaz); }
.kc-adimlar { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-g-kutu-2); margin: var(--s-g-kutu-2) 0; padding: 0; }
.kc-adimlar li { padding-block-start: var(--sp-3); border-block-start: 1px dashed var(--s-buz-soluk); }
.s-ekran .kc-adimlar h3 { margin: var(--sp-1) 0; color: var(--s-buz); }
.kc-adimlar p { margin: 0; color: var(--s-buz-soluk); }
.kc-k-not { margin: var(--sp-3) 0 0; color: var(--s-buz-soluk); }
@media (max-width: 1100px) {
  .kc-biletler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kc-biletler li:nth-child(3) { border-inline-end: 0; }
  .kc-biletler li:nth-child(n+4) { border-block-start: 2px dashed var(--border-strong); }
}
@media (max-width: 1000px) {
  .kc-iki, .kc-ayna, .kc-bant-bas, .kc-sss, .kc-bugun-ic { grid-template-columns: minmax(0, 1fr); gap: var(--s-g-kutu-2); }
  .kc-ayna .kc-metin { order: -1; }
  .kc-fisler, .kc-uclu, .kc-adimlar { grid-template-columns: minmax(0, 1fr); }
  .kc-kirp img { block-size: auto; }
}
@media (max-width: 600px) {
  .kc-biletler { grid-template-columns: minmax(0, 1fr); }
  .kc-biletler li { border-inline-end: 0; border-block-end: 2px dashed var(--border-strong); }
  .kc-biletler li:nth-child(n+4) { border-block-start: 0; }
  .kc-biletler li:last-child { border-block-end: 0; }
  .kc-sayfa { padding: var(--sp-5) var(--sp-4) var(--sp-5) calc(var(--sp-4) + var(--sp-6)); background-image: radial-gradient(circle at 14px 16px, var(--s-zemin) 5px, var(--border) 5px 6px, transparent 6.5px); background-size: 28px 32px; box-shadow: 4px 4px 0 -1px var(--brand-tint), 4px 4px 0 0 var(--border); }
  .kc-z-kagit .kc-sayfa { background-image: radial-gradient(circle at 14px 16px, var(--s-kagit) 5px, var(--border) 5px 6px, transparent 6.5px); }
  .kc-kopya img { box-shadow: 4px 4px 0 -1px var(--brand-tint), 4px 4px 0 0 var(--border); }
  .kc-sayilar li { grid-template-columns: 96px minmax(0, 1fr); }
  .kc-defter > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding-inline: var(--sp-4); }
  .kc-kategoriler { grid-template-columns: minmax(0, 1fr); }
  .kc-sorular summary, .kc-sorular details p { max-inline-size: 100%; }
}

/* ---- Duyarlilik: urun sitelerinin bolumleri ---- */
@media (max-width: 1100px) {
  .s-bolunmus-gorsel.s-sag, .s-bolunmus-gorsel.s-sol { grid-row: 2; }
  .s-bolunmus-gorsel.s-sag { grid-column: kap-bas / tam-son; }
  .s-bolunmus-gorsel.s-sol { grid-column: tam-bas / kap-son; }
  .s-zincir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .s-bolum-bas { grid-template-columns: 1fr; margin-block-end: var(--s-g-kutu-2); }
  .s-uclu { grid-template-columns: 1fr; gap: var(--s-g-kutu-1); }
  .s-zincir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .s-ekran { min-block-size: auto; padding-block: var(--s-g-makro-1) var(--s-g-kutu-3); }
}

/* ---- Hareket: olculu; hareketsiz taban, yalniz izin verilince. ---- */
@keyframes s-yuksel { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s-belir {
      animation: s-yuksel linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .s-belir:nth-child(2) { animation-range: entry 8% entry 53%; }
    .s-belir:nth-child(3) { animation-range: entry 16% entry 61%; }
    .s-belir:nth-child(4) { animation-range: entry 24% entry 69%; }
    .s-belir:nth-child(5) { animation-range: entry 32% entry 77%; }
    .s-belir:nth-child(6) { animation-range: entry 40% entry 85%; }
  }
}