/* =========================================================================
   antalyatesisatuzmani.com - Sucu Murat Usta
   Tasarim sistemi. Token'lar DESIGN.md bolum 5-8 ile birebir esler.
   Harici bagimlilik yok: CDN, ikon fontu veya runtime derleyici kullanilmaz;
   boylece uygulama cevrimdisiyken de tam bicimlendirilmis acilir.
   ========================================================================= */

/* ---------- Font: tek dosya degisken Inter, Turkce alt kume ---------- */
@font-face {
  font-family: 'Inter var';
  src: url('fonts/inter-var-tr.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token'lar ---------- */
:root {
  /* Renkler DESIGN.md bolum 5 temel alinir. Uzerine BEYAZ metin gelen her ton
     WCAG AA (4.5:1) esigine gore ayarlanmistir; olculen oranlar yorumda. */
  --color-primary: #089FB0;        /* dekoratif / ikon: beyaz metin tasimaz */
  --color-primary-dark: #087D8A;   /* beyaz metinle 4.91:1 */
  --color-primary-deep: #066570;   /* hover */
  --color-primary-light: #DDF7FA;
  --color-accent: #D9822B;         /* dekoratif: beyaz metin tasimaz (2.9:1) */
  --color-accent-strong: #B25C0B;  /* beyaz metinle 4.74:1 */
  --color-accent-deep: #964D08;    /* hover */
  --color-accent-soft: #FFF2E4;

  --color-ink: #172126;
  --color-text: #34444B;
  --color-muted: #61727A;          /* #F6FAFA uzerinde 4.76:1 */
  --color-border: #DCE4E7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6FAFA;
  --color-background: #FCFDFD;

  --color-success: #198754;
  --color-warning: #B76A00;
  --color-danger: #B42318;
  --color-whatsapp: #15803D;       /* her iki yonde de 5.01:1 */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 4px 16px rgba(23, 33, 38, .06);
  --shadow-md: 0 12px 32px rgba(23, 33, 38, .09);

  --container-max: 1200px;
  --page-pad: 20px;
  --section-gap: 64px;
  --header-h: 64px;

  --font-body: 'Inter var', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2, .8, .3, 1);
  --dur: 220ms;

  /* Mobil sabit iletisim cubugunun kapladigi yukseklik. */
  --dock-h: calc(60px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  :root { --page-pad: 32px; --section-gap: 88px; --header-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --page-pad: 40px; --section-gap: 104px; --dock-h: 0px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Uygulama hissi: baglantilara dokunurken gri flas olmasin. */
  -webkit-tap-highlight-color: transparent;
  /* Sayfa sonunda tarayici "bounce" efektini zincirlemesin. */
  overscroll-behavior-y: none;
  padding-bottom: var(--dock-h);
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--color-primary-dark); }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

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

.section { padding-block: var(--section-gap); }
.section--alt { background: var(--color-surface-alt); }
/* Bolum basliklari her yerde ortali: onceki karisik hizalama (bazi bolumler
   ortali, bazilari sola yasli) sayfayi dagitiyordu. Uzun metinler ise sola
   yasli kalir - ortalanmis paragraf her satirda yeni baslangic aratir. */
.section__head { max-width: 46rem; margin-inline: auto; margin-bottom: 40px;
                 text-align: center; }
.section__head p { margin-top: 14px; font-size: 1.0625rem; color: var(--color-muted); }
.section__head--start { margin-inline: 0; text-align: left; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 20px; height: 20px; }
.icon--solid { fill: currentColor; stroke: none; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: scale(.98); }

.btn--primary { background: var(--color-primary-dark); color: #fff; }
.btn--primary:hover { background: var(--color-primary-deep); }

.btn--whatsapp { background: var(--color-surface); color: var(--color-whatsapp);
                 border-color: var(--color-whatsapp); }
.btn--whatsapp:hover { background: #F1FAF4; }

.btn--ghost { background: var(--color-surface); color: var(--color-primary-dark);
              border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); }

/* Rehbere kaydet: turkuaz (ara) ve yesil (WhatsApp) yaninda ucuncu bir eylem
   oldugu icin turuncu ile ayrisir. Marka turuncusu #D9822B beyaz metinle
   yalnizca 2.9:1 verdiginden ayni ailenin koyu tonu kullanilir. */
.btn--rehber { background: var(--color-accent-strong); color: #fff;
               border-color: var(--color-accent-strong); }
.btn--rehber:hover { background: var(--color-accent-deep);
                     border-color: var(--color-accent-deep); }

.btn--block { width: 100%; }

/* ---------- Ust bar ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.appbar[data-scrolled='true'] {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.appbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand__mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.brand__name { display: block; font-weight: 700; font-size: 1.0625rem;
               color: var(--color-ink); line-height: 1.2; letter-spacing: -.02em;
               white-space: nowrap; }
.brand__sub { display: block; font-size: .75rem; color: var(--color-muted);
              line-height: 1.2; white-space: nowrap; }
/* Dar ekranda alt satir ust bari iki satira tasiriyordu; yalnizca ust barda gizlenir. */
.appbar .brand__sub { display: none; }
@media (min-width: 420px) { .appbar .brand__sub { display: block; } }

.nav { display: none; gap: 28px; }
.nav a { color: var(--color-text); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.nav a:hover { color: var(--color-primary-dark); }

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

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--color-surface-alt); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .appbar__menu { display: none; }
}

/* ---------- Cekmece menu ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(23, 33, 38, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.scrim[data-open='true'] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; inset-block: 0; left: 0; z-index: 80;
  width: min(310px, 84vw);
  display: flex; flex-direction: column;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur);
  overflow-y: auto;
}
.drawer[data-open='true'] { transform: none; visibility: visible; }

.drawer__top { display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 20px; }
.drawer__link {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; font-weight: 500;
}
.drawer__link:hover { background: var(--color-surface-alt); color: var(--color-primary-dark); }
.drawer__link .icon { color: var(--color-primary); }
.drawer__foot { margin-top: auto; padding-top: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 36px var(--section-gap);
  background:
    radial-gradient(120% 80% at 78% 12%, var(--color-primary-light) 0%, transparent 62%),
    var(--color-background);
}
/* Mobilde hero ortali: dar tek sutunda dengeli ve uygulama acilisi gibi durur.
   Masaustunde sola yaslidir - metin solda, maskot sagda (DESIGN.md 32). */
.hero__grid { display: grid; gap: 32px; align-items: center; text-align: center; }
.hero__grid .chips,
.hero__grid .hero__cta { justify-content: center; }
.hero__grid .hero__lead { margin-inline: auto; }

@media (min-width: 768px) {
  .hero__grid { text-align: left; }
  .hero__grid .chips,
  .hero__grid .hero__cta { justify-content: flex-start; }
  .hero__grid .hero__lead { margin-inline: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .8125rem; font-weight: 500; color: var(--color-text);
}
.chip .icon { width: 16px; height: 16px; color: var(--color-primary); }
.chip--accent { background: var(--color-accent-soft); border-color: #F3D9BB; color: #8A5314; }
.chip--accent .icon { color: var(--color-accent); }

.hero__lead { margin-top: 18px; font-size: 1.0625rem; color: var(--color-text); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__cta .btn { flex: 1 1 220px; }

/* Telefon numarasi da cerceveli: altindaki "Rehbere kaydet" butonuyla ayni
   govdeyi paylasinca ikisi simetrik bir cift olarak okunuyor. */
.hero__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 1.125rem; font-weight: 700; color: var(--color-ink);
  text-decoration: none; letter-spacing: -.01em;
  transition: border-color var(--dur) var(--ease);
}
.hero__phone:hover { border-color: var(--color-primary); }
.hero__phone .icon { color: var(--color-primary); }

/* Mobilde hero eylemleri tek sutun; numara ve rehber butonu da tam genislik
   olmazsa dizi ortasinda dar kalip simetriyi bozuyordu. */
@media (max-width: 767px) {
  .hero__phone,
  .hero .btn--rehber { width: 100%; }
}

/* Maskot: en-boy orani korunur, yuz asla kirpilmaz (DESIGN.md 3). */
.mascot { position: relative; display: flex; justify-content: center; }
.mascot img {
  width: min(62vw, 330px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(23, 33, 38, .16));
}
/* Zemin golgesi: figuru sayfaya oturtur, "yuzen sticker" hissini onler. */
.mascot::after {
  content: '';
  position: absolute; bottom: 6px; left: 50%;
  width: min(52vw, 270px); height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(23, 33, 38, .17) 0%, transparent 70%);
}

@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  .mascot img { width: min(38vw, 430px); }
  .mascot::after { width: min(30vw, 340px); height: 26px; }
  .hero__cta .btn { flex: 0 1 auto; }

  /* Ic sayfalarda hero metni ana sayfadakinden kisa; tam boy maskot
     satirin altinda genis bir bosluk birakiyordu. */
  .hero--sayfa .mascot img { width: min(26vw, 300px); }
  .hero--sayfa .mascot::after { width: min(20vw, 230px); height: 20px; }
}

/* ---------- Guven seridi ---------- */
.trust { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.trust__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.trust__item .icon { color: var(--color-primary); margin-top: 2px; }
.trust__item strong { display: block; color: var(--color-ink); font-size: .9375rem; }
.trust__item span { font-size: .8125rem; color: var(--color-muted); line-height: 1.5; }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Sorun / hizmet kartlari ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cards { gap: 20px; grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.card:active { transform: translateY(0) scale(.99); }

/* Kisa "sorun kutucuklari" ortali durur (ikon + tek satir baslik + eylem).
   Aciklama metni tasiyan hizmet kartlari sola yasli kalir; ortalanmis
   iki-uc satirlik paragraf okumayi yavaslatir. */
.cards--tiles .card { align-items: center; text-align: center; }

.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.card__icon--warn { background: #FDECEA; color: var(--color-danger); }
.card__title { font-size: 1rem; font-weight: 600; color: var(--color-ink); line-height: 1.35; }
.card__text { font-size: .875rem; color: var(--color-muted); line-height: 1.55; }
.card__more {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--color-primary-dark);
  /* Dar iki sutunlu izgarada etiket ile ok isareti ayri satira dusmesin. */
  white-space: nowrap;
}
.card__more .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.card:hover .card__more .icon { transform: translateX(3px); }

/* ---------- Hakkinda ---------- */
.about { display: grid; gap: 28px; align-items: center; }
.about__portrait {
  width: 168px; height: 168px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}
.about__list { display: grid; gap: 12px; margin-top: 22px; }
.about__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.about__list .icon { color: var(--color-primary); margin-top: 3px; }
@media (min-width: 768px) {
  .about { grid-template-columns: 220px 1fr; gap: 44px; }
  .about__portrait { width: 220px; height: 220px; }
}

/* ---------- Surec ---------- */
.steps { display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 22px; background: var(--color-surface);
        border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 50%;
  background: var(--color-primary-dark); color: #fff;
  font-weight: 700; font-size: .9375rem;
}
.step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.step p { font-size: .875rem; color: var(--color-muted); }

/* ---------- Bolgeler ---------- */
/* Baslik ortali oldugundan etiketler de ortalanir; sola yapisik dururlarsa
   bolum dengesiz gorunuyordu. */
.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.area {
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .9375rem; font-weight: 500;
}

/* ---------- SSS ---------- */
/* Blok ortalanir, soru metinleri okunabilirlik icin sola yasli kalir. */
.faq { display: grid; gap: 10px; max-width: 46rem; margin-inline: auto; }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq details[open] { border-color: var(--color-primary); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px;
  min-height: 56px;
  font-weight: 600; color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-primary); transition: transform var(--dur) var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq p { padding: 0 20px 20px; color: var(--color-text); font-size: .9375rem; }

/* ---------- Son cagri ---------- */
.finale {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  /* Gradyanin EN ACIK ucu bile beyaz metinle 4.94:1 olacak sekilde secildi;
     onceki #0AB0C3 ucu yalnizca 2.62:1 veriyordu. */
  background: linear-gradient(150deg, #0A7C88, #064B54);
  color: #fff;
  padding: 36px var(--page-pad);
}
.finale h2 { color: #fff; }
.finale p { margin-top: 12px; color: rgba(255, 255, 255, .92); max-width: 34rem; }
.finale .hero__cta { margin-top: 24px; }
.finale .btn--primary { background: #fff; color: var(--color-primary-dark); }
.finale .btn--primary:hover { background: var(--color-primary-light); }
.finale .btn--whatsapp { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.finale .btn--whatsapp:hover { background: rgba(255, 255, 255, .12); }
.finale__mascot {
  display: none;
  position: absolute; right: 24px; bottom: 0;
  width: 240px; height: auto;
}
@media (min-width: 900px) {
  .finale { padding: 48px 56px; }
  .finale__mascot { display: block; }
  .finale > .finale__body { max-width: 62%; }
}

/* ---------- Kurulum karti ---------- */
.install {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.install img { width: 62px; height: 62px; border-radius: 17px; box-shadow: var(--shadow-sm); }
.install__body { flex: 1 1 240px; }
.install__body strong { display: block; color: var(--color-ink); }
.install__body span { font-size: .875rem; color: var(--color-muted); }
.install__steps { margin-top: 10px; font-size: .875rem; color: var(--color-muted); }
.install__steps kbd {
  padding: 2px 6px; border: 1px solid var(--color-border); border-radius: 5px;
  background: var(--color-surface-alt); font: inherit; font-size: .8125rem;
}

/* ---------- Alt bilgi ---------- */
.footer { background: var(--color-surface); border-top: 1px solid var(--color-border);
          padding-block: 48px 32px; }
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 { font-size: .9375rem; margin-bottom: 12px; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--color-text); text-decoration: none; font-size: .9375rem; }
.footer a:hover { color: var(--color-primary-dark); }
.footer__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border);
                 font-size: .8125rem; color: var(--color-muted); }

/* ---------- Mobil sabit iletisim cubugu ---------- */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 65;
  display: flex; gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--color-border);
}
.dock .btn { flex: 1; min-height: 52px; }
.dock .btn--whatsapp { background: var(--color-whatsapp); color: #fff; border-color: var(--color-whatsapp); }
@media (min-width: 1024px) { .dock { display: none; } }

/* ---------- Cevrimdisi rozeti ---------- */
.offline-bar {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  padding: 10px 16px;
  background: var(--color-ink); color: #fff;
  font-size: .875rem; text-align: center;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
}
.offline-bar[data-visible='true'] { transform: none; }

/* ---------- Icerik sayfasi ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
              font-size: .875rem; color: var(--color-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-dark); }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 44px; }
.prose h3 { margin-top: 28px; }
.prose p { margin-top: 14px; }
.prose ul { margin-top: 14px; display: grid; gap: 10px; }
.prose ul li { display: flex; gap: 10px; align-items: flex-start; }
.prose ul .icon { color: var(--color-primary); margin-top: 4px; }

/* Kisa cevap: arama motorlari, sesli asistanlar ve LLM'lerin dogrudan
   alintilayabilecegi tek paragraflik ozet. schema.org speakable ile isaretli. */
.kisa-cevap {
  margin-bottom: 8px;
  padding: 18px 20px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.callout {
  margin-top: 24px; padding: 20px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.callout strong { color: var(--color-ink); }

/* ---------- Hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Yalnizca mobilde ---------- */
/* Rehbere kaydetme ve "ana ekrana ekle" gibi telefona ozgu eylemler
   masaustunde anlamsiz oldugu icin gizlenir. !important gerekli: bu ogeler
   JavaScript ile hidden ozniteligi uzerinden acilip kapaniyor. */
@media (min-width: 768px) {
  .sadece-mobil { display: none !important; }
}

/* ---------- Yalnizca yuklu uygulamada ---------- */
@media (display-mode: standalone) {
  /* Yuklu uygulamada "ana ekrana ekle" karti anlamsiz olur. */
  [data-only-browser] { display: none !important; }
}