@charset "UTF-8";
/* ==========================================================================
   DERSTUBE — tanıtım sitesi
   --------------------------------------------------------------------------
   Tasarım notu:
   Site, Chrome Web Mağazası tanıtım görselleriyle AYNI görsel dili kullanır:
   derin lacivert zemin, logodan gelen mavi, vurgu ifadesi renkli span olarak
   ayrılan kalın başlıklar, mavi→yeşil geçişli göstergeler. Böylece mağaza
   listelemesinden siteye gelen kişi aynı ürünü gördüğünü hisseder.

   Site tek bir görünüm kullanır: aydınlık tema. Karanlık tema ve tema
   değiştirme düğmesi yoktur; işletim sisteminin tercihine de bakılmaz.

   Güvenlik: Bu dosyada ve sayfalarda satır içi (inline) stil yok. Böylece
   vercel.json'daki CSP başlığı 'unsafe-inline' olmadan çalışabiliyor.

   1  Token'lar          5  Kahraman           9   Belge sayfaları
   2  Tipografi          6  Görsel şeridi      10  Not / SSS / iletişim
   3  Yerleşim           7  Kural ızgarası     11  Alt bilgi
   4  Başlık / gezinme   8  Sütunlar           12  Duyarlılık / hareket
   ========================================================================== */


/* ==========================================================================
   1 — TOKEN'LAR
   ========================================================================== */

:root {
  /* Sitenin tek renk paleti. Başka bir tema yok; `color-scheme: light`
     tarayıcıya da kendi arayüz ögelerini (kaydırma çubuğu, form alanları)
     aydınlık çizmesini söylüyor. */
  --bg:        #FFFFFF;
  --bg-2:      #F5F8FD;
  --surface:   #FFFFFF;
  --surface-2: #F5F8FD;
  --line:      #E2E8F2;
  --line-2:    #CFD9E8;
  --text:      #0C1424;
  --text-2:    #56617A;
  --text-3:    #7E899F;

  --blue:      #2455DE;
  --blue-2:    #1B45BE;
  --blue-dim:  rgba(36, 85, 222, .07);
  --green:     #0E7A57;
  --green-dim: rgba(14, 122, 87, .08);
  --red:       #C23A2B;
  --red-dim:   rgba(194, 58, 43, .07);
  --amber:     #A9700A;

  --btn-text:  #FFFFFF;
  --glow:      rgba(36, 85, 222, .09);
  --glow-2:    rgba(14, 122, 87, .05);
  --shadow:    0 16px 40px -14px rgba(16, 32, 64, .18);

  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 48px);
  --r:    14px;
  --r-sm: 10px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--blue); color: #fff;
  padding: 12px 18px; font-size: .9rem; font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

[hidden] { display: none !important; }


/* ==========================================================================
   2 — TİPOGRAFİ
   ========================================================================== */

h1, h2, h3, h4 { margin: 0; color: var(--text); text-wrap: balance; }

h1 {
  font-size: clamp(2.35rem, 5.6vw, 4.05rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.026em;
}

h3 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

h4 {
  font-size: .715rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-3);
}

/* Vurgulanan ifade — tanıtım görsellerindeki renkli span'in aynısı. */
.hl    { color: var(--blue); }
.hl-g  { color: var(--green); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }

a.link,
.prose p > a,
.prose li > a,
.prose dd > a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--blue) 42%, transparent);
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
a.link:hover,
.prose p > a:hover,
.prose li > a:hover,
.prose dd > a:hover { text-decoration-color: var(--blue); }

strong, b { font-weight: 700; color: var(--text); }

code, .kbd {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}
.kbd {
  display: inline-block;
  padding: 1px 7px;
  font-size: .82em;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface-2);
  white-space: nowrap;
}

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 58ch;
}

.small  { font-size: .885rem; }
.muted  { color: var(--text-2); }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mt-40  { margin-top: 40px; }

/* Bölüm etiketi */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .715rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-2);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  /* Gradyan yerine düz çizgi: mavi-yeşil geçiş dekoratif bir imza,
     bilgi taşımıyor ve sayfayı yapay gösteriyordu. */
  background: var(--line-2);
}

/* Hap etiket — tanıtım görsellerindeki rozetlerin karşılığı. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.pill-blue  { color: var(--blue);  background: var(--blue-dim);  border-color: color-mix(in srgb, var(--blue) 32%, transparent); }
.pill-green { color: var(--green); background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 32%, transparent); }


/* ==========================================================================
   3 — YERLEŞİM
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section       { padding: clamp(58px, 8vw, 106px) 0; }
.section-tight { padding: clamp(42px, 5.5vw, 66px) 0; }
.section-alt   { background: var(--bg-2); }
.line-top      { border-top: 1px solid var(--line); }

.head { max-width: 62ch; }
.head h2 + .lede { margin-top: 1.05rem; }


/* ==========================================================================
   4 — DUYURU ŞERİDİ, BAŞLIK, GEZİNME
   ========================================================================== */

/* Mağaza durumu — sayfanın en üstünde, kaçırılması zor. */
.announce {
  /* Düz zemin. Mavi→yeşil gradyan diğer dekoratif geçişlerle birlikte
     kaldırıldı; şeridi zaten kenarlık ve konumu ayırıyor. */
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.announce-in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
}
.announce p {
  margin: 0;
  font-size: .855rem;
  line-height: 1.5;
  color: var(--text-2);
}
.announce strong { color: var(--text); }
.announce .live {
  position: relative;
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-dim);
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.head-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand-name {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-name i { font-style: normal; color: var(--blue); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block;
  padding: 8px 14px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 9px;
  transition: color 140ms ease, background-color 140ms ease;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.head-tools { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--blue); }

.nav-btn { display: none; }

.nav-panel { display: none; }
.nav-panel.is-open {
  display: block;
  border-top: 1px solid var(--line);
  /* Yalnızca üst/alt boşluk verilir. `padding` kısayolu kullanılırsa
     .wrap'ten gelen yan boşluk (--gut) sıfırlanır; mobil menü maddeleri
     ekran kenarına yapışır ve üstteki logoyla hizasını kaybeder. */
  padding-block: 10px 20px;
}
.nav-panel a {
  display: block;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-panel a:last-of-type { border-bottom: 0; }
.nav-panel .btn { margin-top: 16px; width: 100%; }

@media (max-width: 919px) {
  .nav { display: none; }
  .nav-btn { display: inline-grid; }
  .head-tools .btn-get { display: none; }
}


/* ==========================================================================
   5 — DÜĞMELER VE KAHRAMAN
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--blue);
  color: var(--btn-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, box-shadow 150ms ease;
}
.btn:hover {
  background: var(--blue-2);
}

.btn-lg { padding: 15px 26px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: .875rem; border-radius: 9px; }

.btn-line {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
}
.btn-line:hover {
  background: var(--surface-2);
  border-color: var(--blue);
  color: var(--text);
  box-shadow: none;
}

/* Mağaza adresi henüz yokken: düğme görünür, ne yapacağını söyler, ama
   yanıltıcı bir tıklama hedefi sunmaz. */
.btn[aria-disabled="true"] {
  cursor: default;
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--line-2);
  border-style: dashed;
  box-shadow: none;
}
.btn[aria-disabled="true"]:hover {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--line-2);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mail {
  display: inline-block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  word-break: break-word;
}

/* --- Kahraman ---------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(50px, 7vw, 96px) 0 clamp(38px, 5vw, 60px);
  overflow: hidden;
}
/* Zemin parıltısı — tanıtım görsellerindeki yumuşak ışık. Statik, animasyon
   yok; yalnızca zemine derinlik veriyor. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto -10%;
  height: 720px;
  /* Radyal parlama lekeleri kaldırıldı — dönemin en tanınabilir yapay
     tasarım imzasıydı. Bölüm ayrımını artık zemin rengi ve boşluk yapıyor. */
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { margin-top: 1.6rem; max-width: 20ch; }
.hero .lede { margin-top: 1.55rem; }
.hero .btn-row { margin-top: 2.15rem; }

.hero-status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 52ch;
  margin-top: 1.4rem;
  padding: 13px 16px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.hero-status svg { flex: none; margin-top: 2px; color: var(--blue); }
.hero-status strong { color: var(--text); }

.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 2.3rem 0 0;
  padding: 0;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.facts svg { color: var(--green); flex: none; }


/* ==========================================================================
   6 — GÖRSEL ŞERİDİ (tanıtım görselleri)
   ========================================================================== */

.shots { position: relative; container-type: inline-size; }

.shots-track {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.shots-track::-webkit-scrollbar { display: none; }

.shot {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
}
.shot img {
  /* Görsel + alt yazı + gezinme satırı bir arada ekrana sığmalı. Sütunun
     tamamını kaplayınca blok 786px oluyordu ve 720px'lik bir ekranda
     görselle ileri/geri düğmeleri aynı anda görünmüyordu.
     Yükseklik 54vh ile sınırlanıyor, genişlik ondan türetiliyor
     (16:10 → yükseklik × 1.6); görsel hep tam sığıyor ve ortalanıyor.
     `object-fit: cover` kaldırıldı: görseller zaten tam 1280×800 = 16:10,
     kırpacak bir şey yoktu. */
  width: 100%;
  max-width: min(100%, calc(54vh * 1.6));
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
}
.shot .no {
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  flex: none;
}
.shot .cap { font-size: .93rem; color: var(--text-2); margin: 0; }
.shot .cap b { color: var(--text); font-weight: 700; }

/* --- Galeri gezinmesi ---------------------------------------------------
   Chrome Web Mağazası'ndaki ürün galerisiyle aynı düzen: kendiliğinden geçiş
   yok, oklar büyük görselin iki yanında, altta küçük görseller.
   Oklar `.shots`e göre konumlanıyor; büyük görsel ortalanmış ve sütundan dar
   olduğu için geniş ekranda boşluğa, dar ekranda görselin kenarına oturuyorlar
   — tek kural iki durumu da karşılıyor. */

.shots-ok {
  position: absolute;
  /* Büyük görselin tam dikey ortası. Görselin genişliği `.shot img`teki
     kuralla aynı (sütun genişliği ya da 54vh × 1.6, hangisi küçükse),
     yüksekliği 16:10'dan geliyor: genişlik × 0.625. Yarısı → × 0.3125.
     Böylece ok, ekran ölçüsü ne olursa olsun görselle birlikte kayıyor. */
  top: calc(min(100cqw, 54vh * 1.6) * 0.3125);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
/* JavaScript çalışmadan bu düğmeler bir işe yaramaz; main.js .shots'a
   "hazir" sınıfını ekleyene kadar görünmüyorlar. */
.shots:not(.hazir) .shots-ok,
.shots:not(.hazir) .kucukler { display: none; }

.shots-prev { left: 0; }
.shots-next { right: 0; }
.shots-ok:hover { border-color: var(--blue); color: var(--blue); }
.shots-ok:disabled { opacity: .32; cursor: default; }
.shots-ok:disabled:hover { border-color: var(--line-2); color: var(--text); }

/* Küçük görseller — hangi görselde olduğunuzu ve kaç tane olduğunu bir
   bakışta gösteriyor. Nokta işaretlerinin yaptığı işi içerikle yapıyor. */
.kucukler {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.kucuk {
  width: 104px;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms ease, opacity 150ms ease;
  opacity: .6;
}
.kucuk img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.kucuk:hover { opacity: 1; }
.kucuk[aria-current="true"] {
  border-color: var(--blue);
  opacity: 1;
}

@media (max-width: 620px) {
  .shots-ok { width: 40px; height: 40px; }
  /* Dar ekranda beş küçük görsel tek satırda kalsın diye sabit genişlik
     yerine kalan yeri eşit paylaşıyorlar; ikinci satıra düşmüyorlar. */
  .kucukler { gap: 7px; margin-top: 20px; flex-wrap: nowrap; }
  .kucuk { width: auto; flex: 1 1 0; min-width: 0; }
}

/* Görseller tek tek, mümkün olan en büyük boyutta gösteriliyor: içlerindeki
   arayüz metinleri yan yana iki sütuna sığdırıldığında okunmaz hâle geliyor. */


/* ==========================================================================
   6b — ÖNCE / SONRA  ve  İLK BİR DAKİKA
   ========================================================================== */

/* Kıyas — iki sütun, kutu yok. Farkı renk ve ağırlık taşıyor: "önce" sütunu
   soluk (kapatılmış gibi), "sonra" sütunu tam kontrastta. İki tarafı da
   kartlara alsaydık fark kaybolur, sayfa yine tekdüzeleşirdi. */
.kiyas {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
}
@media (min-width: 720px) {
  .kiyas { grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); }
  /* Sütunları ayıran tek ince çizgi — çerçeve değil, sınır. */
  .kiyas-sonra { border-left: 1px solid var(--line); padding-left: clamp(28px, 4vw, 52px); }
}

.kiyas-yan h3 {
  font-size: .715rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 1.15rem;
}
.kiyas-once  h3 { color: var(--text-3); }
.kiyas-sonra h3 { color: var(--blue); }

.kiyas-yan ul { list-style: none; margin: 0; padding: 0; }
.kiyas-yan li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .975rem;
  line-height: 1.5;
}
.kiyas-yan li:last-child { border-bottom: 0; }
.kiyas-once  li { color: var(--text-3); }
.kiyas-sonra li { color: var(--text); font-weight: 600; }

.kiyas-not {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  font-size: .915rem;
  color: var(--text-2);
}

/* Adımlar — kural ızgarasıyla aynı numara dili, ama kartsız. */
.adimlar {
  list-style: none;
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  padding: 0;
}
@media (min-width: 620px)  { .adimlar { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1000px) { .adimlar { grid-template-columns: repeat(3, 1fr); } }

.adim .n {
  display: block;
  margin-bottom: 12px;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--blue);
}
.adim h3 { margin-bottom: 6px; }
.adim p  { margin: 0; font-size: .915rem; color: var(--text-2); }

/* Adımların sonucu — numaralı bir adım değil, üç adımın çıktısı.
   Bu yüzden ızgaranın dışında ve numarasız duruyor. */
.adim-sonuc {
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  color: var(--text-2);
}
.adim-sonuc strong { color: var(--text); }


/* ==========================================================================
   7 — KURAL IZGARASI
   ========================================================================== */

.rules {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  padding: 0;
}
@media (min-width: 640px)  { .rules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rules { grid-template-columns: repeat(3, 1fr); } }

.rule {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.rule:hover { border-color: var(--line-2); background: var(--surface-2); }

.rule .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  margin-bottom: 15px;
  padding: 0 8px;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  background: var(--blue-dim);
  border-radius: 8px;
}
.rule h3 { margin-bottom: 6px; }
.rule p { margin: 0; font-size: .915rem; color: var(--text-2); }

/* Yedi kart üç sütuna 3+3+1 olarak bölünüyor ve son kart yalnız kalıyor.
   Son kartı satırın tamamına yayıp numara ile başlığı aynı hizaya alarak
   ızgarayı kapatıyoruz. */
@media (min-width: 1000px) {
  .rule:last-child {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
  }
  .rule:last-child .n { margin-bottom: 0; }
  .rule:last-child p { flex: 1 1 100%; margin-top: 7px; }
}

.rules-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: .9rem;
  color: var(--text-2);
}
.rules-note svg { color: var(--green); flex: none; }


/* ==========================================================================
   8 — SÜTUNLAR
   ========================================================================== */

.cols {
  display: grid;
  gap: clamp(22px, 3vw, 30px);
  margin-top: clamp(34px, 4.5vw, 50px);
}
@media (min-width: 760px)  { .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.card .ico {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 17px;
  border-radius: 11px;
  background: var(--blue-dim);
  color: var(--blue);
}
.card .ico-g { background: var(--green-dim); color: var(--green); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .93rem; color: var(--text-2); }
.card p:last-child { margin-bottom: 0; }


/* ==========================================================================
   9 — BELGE SAYFALARI
   ========================================================================== */

.page-head {
  position: relative;
  padding: clamp(42px, 6vw, 78px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -60% 0 auto 0;
  height: 460px;
  pointer-events: none;
}
.page-head > .wrap { position: relative; }
.page-head h1 { font-size: clamp(1.95rem, 4.4vw, 3rem); }
.page-head .lede { margin-top: 1.15rem; }

.doc {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 52px);
  /* Yalnızca üst/alt boşluk. `padding` kısayolu kullanılırsa .wrap'ten gelen
     yan boşluk (--gut) sıfırlanır ve belge sayfalarındaki metin ekranın
     kenarına yapışır — başlık ve alt bilgi içeride kalırken gövde dışarı
     taşmış gibi görünür. Aynı hata .nav-panel'de de vardı. */
  padding-block: clamp(36px, 5vw, 60px) clamp(56px, 8vw, 96px);
}
/* Izgara sütunlarının örtük en küçük genişliği `auto`dur: içindeki en dar
   ögeden daha fazla daralamazlar. Gizlilik Politikası'ndaki tablo (kendi
   kutusunda kayıyor olsa bile) sütunu genişletip sayfayı yana kaydırıyordu.
   `min-width: 0` sütunun daralmasına izin verir; taşan içerik kendi
   kutusunda kayar. */
.doc > * { min-width: 0; }

@media (min-width: 1020px) {
  .doc { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0 clamp(44px, 6vw, 80px); }
  .toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

.toc h4 { margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  position: relative;
  padding: 6px 0 6px 2.15rem;
  font-size: .885rem;
  line-height: 1.4;
  color: var(--text-2);
  text-decoration: none;
  border-radius: 6px;
  transition: color 140ms ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--blue); font-weight: 700; }
.toc a.on::before { color: var(--blue); }

.toc-m {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  /* İçindekiler kutusu ile metnin arasındaki boşluk. Masaüstünde iki sütun
     olduğu için .doc'un `gap` değeri bu işi görüyor; mobilde ikisi aynı
     sütunda alt alta geldiği için gap devreye girmiyor ve kutu metne
     yapışıyordu. Aynı değer kullanılıyor ki iki düzen tutarlı dursun.
     Masaüstünde .toc-m zaten display:none, bu yüzden orada etkisi yok. */
  margin-bottom: clamp(30px, 4vw, 52px);
}
.toc-m summary {
  padding: 14px 18px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
  cursor: pointer;
}
.toc-m[open] summary { border-bottom: 1px solid var(--line); }
.toc-m .in { padding: 10px 18px 16px; }
@media (min-width: 1020px) { .toc-m { display: none; } }
@media (max-width: 1019px) { .toc:not(.toc-m) { display: none; } }

/* --- Prose ------------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose > *:first-child { margin-top: 0; }

.prose h2 {
  margin: clamp(46px, 5.5vw, 72px) 0 1.1rem;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
  font-size: clamp(1.42rem, 2.6vw, 1.85rem);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Bölümler ----------------------------------------------------------- */
/* Bölümler kutuya ALINMIYOR. Ayrımı ince bir çizgi ve cömert boşluk yapıyor —
   uzun bir belgede matbu düzenin yaptığı şey budur. Her bölümü zeminli bir
   karta almak sayfayı tekdüzeleştiriyor ve gerçek uyarı kutularını (.note)
   görünmez kılıyordu.
   Sarmalayıcı yine de duruyor: çapa hedefi bölümün başı oluyor, başlığın
   ortası değil. scroll-margin bu yüzden burada. */
.prose .sec {
  padding-top: clamp(30px, 4vw, 46px);
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.prose .sec:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
/* Bölüm başlığı, o bölüm ekranda olduğu sürece üstte kalır; bir sonraki bölüm
   gelince onun başlığı yerini alır. Uzun bir belgede kaydırırken "hangi
   bölümdeyim" sorusunu ortadan kaldırıyor — İçindekiler'e dönmek gerekmiyor.
   Yapışkan site başlığı 68px, bu yüzden hemen onun altına oturuyor.
   Zemin şart: olmadan altından geçen metin başlığın üstüne biner. */
.prose .sec > h2 {
  position: sticky;
  top: 68px;          /* site başlığı 68px + 1px kenarlık; tam altına oturur */
  z-index: 4;
  margin-top: 0;
  padding-top: 0;
  padding-block: 12px 10px;
  border-top: 0;
  background: var(--bg);
}
.prose .sec > *:last-child { margin-bottom: 0; }

/* Hareketi azaltma tercihi açıksa yapışkanlık kapanır. */
@media (prefers-reduced-motion: reduce) {
  .prose .sec > h2 { position: static; }
}

/* Belge içi görsel — kanıt niteliğinde, kahraman değil.
   Metin sütununun tamamını kaplarsa (759×474) okuma akışını kesiyor ve
   kaydırırken bölüm başlığı ekrandan çıkıyordu; bu yüzden genişlik
   sınırlandırıldı. Sayfada yalnızca metnin anlatamadığını GÖSTEREN iki
   görsel var: arama karşılaştırması ve Veli Paneli. */
.prose figure.sekil {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  max-width: 480px;
}
/* Görsel tıklanabilir: küçük hâlde içindeki arayüz metni okunmuyor,
   büyütünce okunuyor. Düğme olması klavyeyle de açılabilmesi için. */
/* Sınıf `.prose`'a bağlı DEĞİL: aynı düğme ana sayfadaki görsel şeridinde de
   kullanılıyor. Şeritte görsel genişliği `.shot img`'den geliyor, bu yüzden
   düğme yalnızca saydam bir sarmalayıcı. */
.sekil-ac {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.prose figure.sekil img {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color 150ms ease;
}
.sekil-ac:hover img,
.sekil-ac:focus-visible img { border-color: var(--blue); }

/* --- Görsel büyüteci ---------------------------------------------------- */
/* <dialog>: odak tuzağı, Escape ve arka plan katmanı tarayıcıdan geliyor. */
.buyutec {
  max-width: min(96vw, 1280px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.buyutec::backdrop { background: rgba(4, 8, 16, .82); }

.buyutec-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.buyutec-kapat {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
}
.buyutec-kapat:hover { border-color: var(--blue); color: var(--blue); }

/* Dar ekran / dikey telefon.
   Görseller 16:10 yatay; telefon dikeyken ekrana sığdırılınca büyütme oranı
   1.05x'te kalıyordu, yani içindeki arayüz metni yine okunmuyordu. Çözüm:
   görseli okunabilir bir genişlikte bırakıp kutuyu kaydırılabilir yapmak —
   kullanıcı parmağıyla gezinerek okur. Çarpı bu durumda görselle birlikte
   kayıp gitmesin diye ekrana sabitleniyor. */
@media (max-width: 620px) {
  .buyutec {
    max-width: 94vw;
    max-height: 86vh;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .buyutec-img {
    width: auto;
    max-width: none;
    min-width: 820px;
    max-height: none;
  }
  .buyutec-kapat {
    position: fixed;
    top: 14px; right: 14px;
    width: 42px; height: 42px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  }
}

.prose h3 { margin: 2.3rem 0 .65rem; font-size: 1.05rem; }

/* Bölüm başlığındaki emoji — başlıktan bir boşluk kadar ayrı ve biraz küçük. */
.prose h2 .em {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 400;
  font-size: .8em;
  margin-right: .44em;
  line-height: 1;
}

.prose p { line-height: 1.75; }

.prose .intro { font-size: 1.1rem; line-height: 1.68; color: var(--text); }

/* Öne çıkan cümle. Kutu ve renkli şerit yok: vurguyu punto, ağırlık ve
   çevresindeki boşluk taşıyor. Kutuya alınırsa sayfadaki gerçek uyarı
   kutularıyla (.note) yarışıyor ve ikisi de anlamını yitiriyor. */
.prose .pull {
  margin: 2.4rem 0;
  padding: 0;
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.016em;
  color: var(--text);
  max-width: 34ch;
}

.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 0; }
.prose ul { list-style: none; }
.prose ul > li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: .55em;
  line-height: 1.68;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .66em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.prose ol { padding-left: 1.4rem; }
.prose ol > li { margin-bottom: .55em; line-height: 1.68; padding-left: .35rem; }
.prose ol::marker, .prose li::marker { color: var(--text-3); }
.prose .tight li { margin-bottom: .25em; }

.deflist { margin: 0 0 1.2em; }
.deflist > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.deflist > div:first-child { border-top: 1px solid var(--line); }
.deflist dt { font-weight: 700; font-size: .96rem; }
.deflist dd { margin: 0; font-size: .93rem; color: var(--text-2); }
@media (min-width: 640px) {
  .deflist > div { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 1.6rem; align-items: baseline; }
}


/* ==========================================================================
   10 — NOT / SSS / İLETİŞİM
   ========================================================================== */

.note {
  margin: 1.8rem 0;
  padding: 17px 19px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .93rem;
  line-height: 1.64;
  color: var(--text-2);
}
.note b { display: block; margin-bottom: 4px; font-size: .89rem; color: var(--text); }
.note p:last-child { margin-bottom: 0; }
.note-blue  { border-left-color: var(--blue);  background: var(--blue-dim); }
.note-green { border-left-color: var(--green); background: var(--green-dim); }
.note-red   { border-left-color: var(--red);   background: var(--red-dim); }

.faq { margin: 1.5rem 0 0; }
.qa {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: 10px;
}
.qa summary {
  position: relative;
  padding: 15px 46px 15px 18px;
  font-size: .97rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa .a { padding: 0 18px 17px; font-size: .93rem; color: var(--text-2); }
.qa .a p:last-child { margin-bottom: 0; }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.contact-tx { flex: 1 1 260px; }
.contact-tx h3 { margin-bottom: 5px; }
.contact-tx p { margin: 0; font-size: .93rem; color: var(--text-2); }

/* Kapanış */
.close-cta {
  position: relative;
  padding: clamp(46px, 6vw, 78px) 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.close-cta::before {
  content: "";
  position: absolute;
  inset: auto 0 -50% 0;
  height: 420px;
  pointer-events: none;
}
.close-cta > .wrap { position: relative; }
.close-cta h2 + p { margin-top: 1rem; max-width: 54ch; color: var(--text-2); }
.close-cta .btn-row { margin-top: 2rem; }


/* --- Kurulum notu ve telefon satırı --------------------------------------
   Ölçümde çıkan iki sorun: (a) kurulumun üç adım sürdüğü ancak sayfanın
   dibinde anlaşılıyordu, (b) telefondan bakan kişi uzantıyı kuramıyor ama
   sayfa bunu hiç söylemiyordu. İki satır ikisini de çözüyor.

   Telefon satırı yalnızca dar ekranda görünür — başlıktaki "Uzantıyı Edin"
   düğmesinin gizlendiği eşiğin (919px) aynısı kullanıldı, böylece ikisi hep
   tutarlı davranıyor. `live-only` ile birlikte çalışabilmesi için `hidden`
   her koşulda kazanır. */

.kurulum-not {
  max-width: 62ch;
  margin: 20px 0 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--text-2);
}

.telefon-not {
  display: none;
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--text-2);
}
.close-cta .telefon-not { margin-inline: auto; }
@media (max-width: 919px) {
  .telefon-not { display: block; }
  span.telefon-not { display: inline; }
}
.telefon-not[hidden] { display: none !important; }

/* Metin içinde geçen bir düğme: bağlantı gibi görünüyor çünkü cümlenin
   parçası. Kopyalandıktan sonra yeşile döner ve altı çizilmez. */
.baglanti-kopyala {
  padding: 0;
  font: inherit;
  color: var(--blue);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.baglanti-kopyala:hover { border-bottom-color: var(--blue); }
.baglanti-kopyala.tamam {
  color: var(--green);
  border-bottom-color: transparent;
  cursor: default;
}

/* --- Gizlilik Politikası sayfası ----------------------------------------
   Metin iki dilde. JavaScript çalıştığında bir dil gizlenir; çalışmadığında
   iki metin de görünür kalır (düğmeler zaten gizli) — böylece İngilizce metin
   hiçbir koşulda erişilemez hâle gelmiyor. */

/* Kapsam uyarısı — belgenin uzantıya ait olduğunu ve İngilizcesinin
   bulunduğunu, metne girmeden önce iki dilde birden söylüyor. */
.kapsam-uyari {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 62ch;
  margin-bottom: 26px;
  padding: 16px 18px;
  background: var(--blue-dim);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.kapsam-im {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  color: var(--btn-text);
  background: var(--blue);
  border-radius: 50%;
}
.kapsam-tx p { margin: 0; font-size: .93rem; line-height: 1.62; color: var(--text-2); }
.kapsam-tx p + p { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.kapsam-tx strong { color: var(--text); }

.pol-tr[hidden], .pol-en[hidden] { display: none !important; }

.dil {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dil-et {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dil-et span { font-weight: 500; opacity: .75; }
.dil-tus { display: flex; gap: 6px; }
.dil-btn {
  padding: 7px 15px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.dil-btn:hover { color: var(--text); border-color: var(--blue); }
.dil-btn[aria-pressed="true"] {
  color: var(--btn-text);
  background: var(--blue);
  border-color: var(--blue);
}

/* Politika tabloları — dar ekranda kendi içinde yatay kayar; sayfa gövdesi
   asla yana kaymaz. */
.tablo-kutu {
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.pol-tablo {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .93rem;
}
.pol-tablo th, .pol-tablo td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
}
.pol-tablo tbody tr:last-child th,
.pol-tablo tbody tr:last-child td { border-bottom: 0; }
.pol-tablo thead th {
  /* Başlıklar HTML'de zaten büyük harfle yazılı — `text-transform` yok.
     Tarayıcının büyütmesine bırakılsaydı Türkçe "i" harfi noktasız I'ya
     dönebilir ve metin PDF'tekinden farklı görünürdü. */
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
  background: var(--surface-2);
  white-space: nowrap;
}
.pol-tablo tbody th {
  font-weight: 600;
  color: var(--text);
  width: 30%;
}
.pol-tablo td { color: var(--text-2); }
.pol-tablo td:last-child { white-space: normal; }

/* Metnin sonundaki kapsam notu — uzantı mı, site mi? */
.pol-not {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--text-2);
}

@media (max-width: 620px) {
  .pol-tablo { min-width: 460px; font-size: .88rem; }
  .pol-tablo th, .pol-tablo td { padding: 10px 12px; }
}


/* ==========================================================================
   11 — ALT BİLGİ
   ========================================================================== */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(44px, 6vw, 68px) 0 30px;
  font-size: .915rem;
}

.foot-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 44px; } }

.foot-about p {
  margin: 15px 0 0;
  color: var(--text-2);
  font-size: .91rem;
  max-width: 34ch;
}
.foot-col h4 { margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 9px; }
.foot-col a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 140ms ease;
}
.foot-col a:hover { color: var(--blue); }

.foot-legal {
  margin: 26px 0 0;
  font-size: .81rem;
  line-height: 1.66;
  color: var(--text-3);
  max-width: 80ch;
}

.foot-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .81rem;
  color: var(--text-3);
}
.foot-end p { margin: 0; }


/* ==========================================================================
   12 — DUYARLILIK / HAREKET / BASKI
   ========================================================================== */

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .announce-in { align-items: flex-start; }
  .announce .live { margin-top: 7px; }
  .contact { align-items: flex-start; }
}

/* Dokunmatik ekranlar: simge düğmeleri parmakla rahat basılacak boyuta çıkar. */
@media (max-width: 620px), (pointer: coarse) {
  .icon-btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shots-track { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

@media print {
  .site-head, .site-foot, .announce, .shots, .toc, .toc-m,
  .close-cta, .btn, .hero-status { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; }
  .prose h2 { page-break-after: avoid; }
}