/**
 * Vitrin stilleri — ONAYLI TAKİPÇİHİZMET TASARIMINDAN.
 *
 * Her ölçü `_tasarim/Main.dc.html` (masaüstü artboard) ve
 * `_tasarim/MobilAnaSayfa.dc.html` (mobil artboard) kaynaklarından
 * çıkarıldı. Göz kararı değer yok.
 *
 * Masaüstü kabuk yükseklikleri: topbar 34 · header 80 · nav 46 · ticker 40
 * Hero: grid 1fr/300px · gap 16 · margin-top 18 · yükseklik 440 · radius 16
 * Bölümler: margin-top 36 · başlık bloğu margin-bottom 14
 */

:root {
  --font-head: var(--font-head-loaded), 'Trebuchet MS', Arial, sans-serif;
  --font-body: var(--font-body-loaded), 'Segoe UI', Arial, sans-serif;
}

/* ── Üst bant ─ 34px · var(--green-deep) · #CFE9DD · 13px ───────────────────────── */

.s-topbar { background: var(--green-deep); color: var(--green-soft); font-size: var(--fs-sm); }
.s-topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-9);
  min-height: 34px;
}
.s-topbar__l, .s-topbar__r { display: flex; align-items: center; gap: var(--sp-9); min-width: 0; }
.s-topbar__r { gap: var(--sp-8); }
.s-topbar a, .s-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 24px;
  color: var(--green-soft);
  white-space: nowrap;
}
.s-topbar a:hover { color: var(--on-image); }
.s-topbar svg { color: var(--topbar-icon); }
.s-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

.s-topbar__status { display: none; }
.s-topbar__r { display: none; }
@media (min-width: 900px) { .s-topbar__status { display: inline-flex; } }
@media (min-width: 1100px) { .s-topbar__r { display: flex; } }

/* ── Ana başlık ─ 80px · card · gap 26 ────────────────────────────────── */

.s-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
.s-header__row { display: flex; align-items: center; gap: var(--sp-11); min-height: 80px; }

/* Marka: 40×40 karo (radius 10) + Outfit 800 22px + 10px alt metin */
.s-brand { display: flex; align-items: center; gap: var(--sp-4); color: var(--ink); flex: none; }
.s-brand__mark {
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-brand);
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  line-height: 1;
  flex: none;
}
.s-brand__txt { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.s-brand__name {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tighter);
  color: var(--ink);
  white-space: nowrap;
}
.s-brand__name span { color: var(--brand); }
.s-brand__sub {
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: var(--mute);
  font-weight: var(--fw-bold);
  margin-top: 3px;
  white-space: nowrap;
}
@media (max-width: 768px) { .s-brand__sub { display: none; } }

/* Arama: 46px · 2px brand kenarlık · kategori + input + 60px yeşil düğme */
.s-search {
  flex: 1;
  display: none;
  height: 46px;
  border: 2px solid var(--brand);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}
.s-search:focus-within { box-shadow: var(--focus-ring); }
.s-search__cat {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-6);
  background: var(--card-2);
  border: 0;
  border-right: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  white-space: nowrap;
  appearance: none;
  padding-inline-end: var(--sp-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23F1F3F5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 10px 7px;
  cursor: pointer;
}
.s-search__in {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 var(--sp-6);
  color: var(--ink);
  font-size: var(--fs-md);
}
.s-search__in::placeholder { color: var(--mute); }
.s-search__in:focus { outline: none; }
.s-search__btn {
  width: 60px;
  border: 0;
  background: var(--brand);
  color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: none;
}
.s-search__btn:hover { background: var(--brand-d); }
@media (min-width: 1024px) { .s-search { display: flex; } }

/* Mobil arama satırı */
.s-header__msearch { padding-bottom: var(--sp-5); }
.s-msearch {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 42px;
  padding-inline: var(--sp-5);
  border: 2px solid var(--brand);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--mute);
  font-size: var(--fs-md);
  overflow: hidden;
}
.s-msearch span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 1024px) { .s-header__msearch { display: none; } }

/* Sağ eylemler: gap 22 · ikon 24 brand · iki satırlı etiket */
.s-acts { display: flex; align-items: center; gap: var(--sp-10); margin-inline-start: auto; flex: none; }
.s-act {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap);
  color: var(--ink);
  cursor: pointer;
  background: none; border: 0; padding: 0;
}
.s-act:hover { color: var(--brand); }
.s-act > svg { color: var(--brand); }
.s-act__txt { display: none; flex-direction: column; line-height: 1.15; text-align: start; }
.s-act__k { font-size: var(--fs-xs); color: var(--mute); }
.s-act__v { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; }
.s-act--wide { display: none; }
.s-act--menu { display: flex; }
@media (min-width: 640px) { .s-act__txt { display: flex; } }
@media (min-width: 1024px) { .s-act--wide { display: flex; } .s-act--menu { display: none; } }

/* Sepet rozeti — gerçek sepet durumundan */
.s-cart { position: relative; display: inline-flex; }
.s-cart__n {
  position: absolute; top: -6px; inset-inline-end: -8px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}

/* ── Platform şeridi ─ 46px · aktifte 3px alt çizgi ───────────────────── */

.s-nav { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7); }
.s-nav__list {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
  min-width: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none;
}
.s-nav__list::-webkit-scrollbar { display: none; }
.s-nav__link {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 46px; padding: 0 var(--sp-5);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  flex: none;
  list-style: none;
  cursor: pointer;
}
.s-nav__link::-webkit-details-marker { display: none; }
.s-nav__link:hover { color: var(--brand); border-bottom-color: var(--brand); }
.s-nav__link[aria-current='page'] { color: var(--brand); border-bottom-color: var(--brand); }

.s-nav__more { position: relative; flex: none; }
.s-nav__panel {
  position: absolute; top: 100%; inset-inline-start: 0;
  z-index: var(--z-raised);
  min-width: 220px; max-height: 60vh; overflow-y: auto;
  list-style: none; margin: 0; padding: var(--sp-2);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.s-nav__panel a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 36px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--fs-md);
}
.s-nav__panel a:hover { background: var(--card-2); }
.s-nav__panel a > span:last-child { margin-inline-start: auto; color: var(--mute); font-size: var(--fs-xs); }

.s-nav__r { display: none; align-items: center; gap: var(--sp-2); flex: none; }
@media (min-width: 900px) { .s-nav__r { display: flex; } }
.s-pill {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  height: 32px; padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-weight: var(--fw-bold); font-size: var(--fs-md);
  white-space: nowrap;
}
.s-pill--red { color: var(--red); }
.s-pill--red:hover { color: var(--red); background: var(--badge-red-bg); }
.s-pill--grn { background: var(--brand-l); color: var(--brand); }
.s-pill--grn:hover { background: rgba(34, 181, 115, 0.22); color: var(--brand); }
.s-pill__n {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); background: var(--card); color: var(--brand);
  font-size: var(--fs-2xs);
}

/* ── Canlı sipariş bandı ─ 40px ───────────────────────────────────────── */

.s-ticker { background: var(--card); border-bottom: 1px solid var(--line); overflow: hidden; }
.s-ticker__in { display: flex; align-items: center; min-height: 40px; }
.s-ticker__lbl {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps); color: var(--red);
  padding-right: var(--sp-7); border-right: 1px solid var(--line);
  flex: none; white-space: nowrap;
}
.s-ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.s-ticker__list {
  display: flex; list-style: none; margin: 0; padding: 0;
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.s-ticker__list::-webkit-scrollbar { display: none; }
.s-ticker__list li {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-9); border-right: 1px solid var(--line);
  font-size: var(--fs-sm); white-space: nowrap; flex: none;
}
.s-ticker__list b { color: var(--ink); }
.s-ticker__ok { color: var(--ok); font-weight: var(--fw-bold); }
.s-ticker__run { color: var(--org); font-weight: var(--fw-bold); }
.s-ticker__empty { padding-inline: var(--sp-9); font-size: var(--fs-sm); color: var(--mute); }

/* ── Hero ─ grid 1fr/300 · gap 16 · mt 18 · h 440 · radius 16 ────────── */

.s-hero { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); margin-top: var(--sp-8); }
@media (min-width: 1024px) { .s-hero { grid-template-columns: 1fr 300px; } }

.s-hero__main {
  position: relative;
  border-radius: var(--r-hero);
  overflow: hidden;
  min-height: 440px;
  background: var(--hero-bg);
  color: var(--on-image);
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) { .s-hero__main { min-height: 420px; } }

.s-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
/* Sol taraftaki metnin okunması için — onaylı gradyan, birebir. */
.s-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,21,25,.95) 0%, rgba(15,21,25,.85) 40%, rgba(15,21,25,.3) 60%, rgba(15,21,25,0) 78%);
}
@media (max-width: 700px) {
  /* Dar ekranda metin görselin üstünü tamamen kaplar. */
  .s-hero__shade { background: linear-gradient(180deg, rgba(15,21,25,.72) 0%, rgba(15,21,25,.94) 55%); }
  .s-hero__slide { background-position: 62% center; }
}

.s-hero__txt {
  position: relative;
  padding: var(--sp-9) var(--sp-16);
  max-width: 560px;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
@media (max-width: 700px) { .s-hero__txt { padding: var(--sp-9); } }

.s-hero__kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); color: var(--green-soft);
}
.s-hero__kicker .c-tile { background: var(--brand); color: var(--on-brand); }

.s-hero__h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--on-image); }
@media (max-width: 700px) { .s-hero__h1 { font-size: var(--fs-3xl); } }
.s-hero__p { color: var(--ink-2); font-size: var(--fs-lg); text-wrap: pretty; }

.s-hero__ctas { display: flex; gap: var(--sp-5); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }
.s-hero__ticks {
  display: flex; gap: var(--sp-8); margin-top: var(--sp-3);
  font-size: var(--fs-sm); color: var(--ink-2); flex-wrap: wrap;
  list-style: none; padding: 0;
}
.s-hero__ticks li { display: flex; align-items: center; gap: var(--sp-2); }
.s-hero__ticks svg { color: var(--brand); }

.s-hero__dots { position: absolute; left: var(--sp-16); bottom: var(--sp-10); display: flex; gap: var(--sp-2); }
@media (max-width: 700px) { .s-hero__dots { left: var(--sp-9); bottom: var(--sp-5); } }
.s-hero__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); }
.s-hero__dots i[data-on='true'] { width: 22px; background: var(--on-image); }

.s-hero__arrows { position: absolute; right: var(--sp-6); bottom: var(--sp-6); display: flex; gap: var(--sp-2); }
.s-hero__arrows button {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-image); cursor: pointer;
}
.s-hero__arrows button:hover { background: rgba(0,0,0,.7); }

/* Hero sağ kolon */
.s-hero__side { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
.s-phonecard {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--green-deep), color-mix(in srgb, var(--green-deep) 70%, var(--brand) 12%));
  border: 1px solid var(--promo-line);
  border-radius: var(--r-card);
  display: flex; flex-direction: column;
  min-height: 250px;
}
.s-phonecard__hd { padding: var(--sp-7) var(--sp-7) 0; display: flex; flex-direction: column; gap: var(--sp-1); position: relative; z-index: 1; }
.s-phonecard__hd b { font-size: var(--fs-base); color: var(--on-image); font-family: var(--font-head); }
.s-phonecard__hd span { font-size: var(--fs-xs); color: var(--on-image-2); }
.s-phonecard__art { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); }

.s-toolcard {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  background: var(--yel);
  border: 1px solid var(--yel-b);
  border-radius: var(--r-card);
  color: var(--ink);
}
.s-toolcard:hover { border-color: var(--gold); color: var(--ink); }
.s-toolcard__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.s-toolcard__t b { font-size: var(--fs-base); color: var(--on-image); font-family: var(--font-head); }
.s-toolcard__t span { font-size: var(--fs-xs); color: var(--gold); }
.s-toolcard > svg:last-child { color: var(--mute); }

/* ── Güven şeridi ─────────────────────────────────────────────────────── */

.s-trust {
  display: grid;
  margin-top: var(--sp-7);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 640px) { .s-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .s-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-trust__i { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-8); border-top: 1px solid var(--line); }
.s-trust__i:first-child { border-top: 0; }
@media (min-width: 640px) {
  .s-trust__i { border-top: 0; border-inline-start: 1px solid var(--line); }
  .s-trust__i:nth-child(2n + 1) { border-inline-start: 0; }
}
@media (min-width: 1024px) {
  .s-trust__i { border-inline-start: 1px solid var(--line); }
  .s-trust__i:nth-child(2n + 1) { border-inline-start: 1px solid var(--line); }
  .s-trust__i:first-child { border-inline-start: 0; }
}
.s-trust__t { display: flex; flex-direction: column; min-width: 0; }
.s-trust__t b { font-size: var(--fs-md); color: var(--ink); font-family: var(--font-head); }
.s-trust__t span { font-size: var(--fs-xs); color: var(--mute); }
.s-trust .c-tile { background: var(--card-2); color: var(--brand); }

/* ── Ürün kartı (Çok satan paketler) ──────────────────────────────────── */

.s-prod { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); }
.s-prod__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.s-prod__cat { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--mute); text-transform: uppercase; }
.s-prod__n { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-prod__meta { font-size: var(--fs-xs); color: var(--mute); }
.s-prod__p { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.s-prod__cta {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-md);
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center;
}

/* ── Kategori kartı ───────────────────────────────────────────────────── */

.s-cat { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6); }
.s-cat__t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.s-cat__n { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--ink); }
.s-cat__m { font-size: var(--fs-xs); color: var(--mute); }

/* ── Adım kartı ───────────────────────────────────────────────────────── */

.s-step { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); }
.s-step__n {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: var(--brand-l); color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-md);
}
.s-step h3 { font-size: var(--fs-lg); }
.s-step p { font-size: var(--fs-md); color: var(--ink-2); }

/* ── Bülten ───────────────────────────────────────────────────────────── */

.s-news {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-7);
  margin-top: var(--sp-section);
  padding: var(--sp-10);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.s-news__t { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.s-news__t h2 { font-size: var(--fs-xl); }
.s-news__t span { font-size: var(--fs-md); color: var(--mute); }

/* ── Site altı ────────────────────────────────────────────────────────── */

.s-footer { margin-top: var(--sp-section); border-top: 1px solid var(--line); background: var(--card); }
.s-footer__in {
  display: grid; gap: var(--sp-10);
  padding-block: var(--sp-12);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.s-footer__brand { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 40ch; }
.s-footer__brand p { font-size: var(--fs-md); color: var(--mute); }
.s-footer__h {
  font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--mute); margin-bottom: var(--sp-4);
}
.s-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-footer__col a {
  display: inline-flex; align-items: center;
  min-height: 30px; min-width: 24px;
  color: var(--ink-2); font-size: var(--fs-md);
}
.s-footer__col a:hover { color: var(--brand); }
.s-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-7);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--mute);
}
.s-footer__legal a { color: var(--mute); display: inline-flex; align-items: center; min-height: 24px; }
.s-footer__legal a:hover { color: var(--brand); }
.s-pay { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-bottom: var(--sp-9); }
.s-pay span {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--card-2); color: var(--ink-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em;
}

/* ── Çekmece listesi ──────────────────────────────────────────────────── */

.s-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-drawer-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-height: var(--tap); padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: var(--fw-semibold);
}
.s-drawer-list a:hover { color: var(--brand); }
.s-drawer-list__b { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; }


/* ── Hizmet sayfası ───────────────────────────────────────────────────────
   Ölçüler onaylı `_tasarim/HizmetSayfasi.dc.html` şablonundan alındı:
   grid 340px 1fr 360px / gap 20 · sol sütun gap 10 · görsel 300 ·
   künye padding 14 / 13px · orta sütun gap 14 · h1 26/1.15 ·
   paket kartı padding 18, satır 2px kenarlık r8 padding 10 14 ·
   sağ panel sticky top 16, padding 20, üst kenarlık 4px marka,
   fiyat 30px, alanlar 46px, birincil düğme 50px.
   ───────────────────────────────────────────────────────────────────────── */

.s-svc { display: grid; gap: var(--sp-9); align-items: start; }
@media (min-width: 1100px) {
  .s-svc { grid-template-columns: 340px minmax(0, 1fr) 360px; }
}

/* Küçük ekranda sıra: BAŞLIK + PAKET SEÇİMİ → FİYAT + CTA → görsel.
   Önceden satın alma kutusu ilk sıradaydı ve `<h1>` ~1600 px aşağıda
   kalıyordu: kullanıcı ne aldığını görmeden fiyat görüyordu
   (denetim, madde 02). */
.s-svc__main { order: 1; }
.s-svc__buy { order: 2; }
.s-svc__gal { order: 3; }
@media (min-width: 1100px) {
  .s-svc__gal { order: 1; }
  .s-svc__main { order: 2; }
  .s-svc__buy { order: 3; }
}

/* ── Sol sütun ─────────────────────────────────────────────────────────── */

.s-svc__gal { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.s-svc__hero {
  position: relative; overflow: hidden;
  /* 260/300px kareye yakındı ve sol sütunu gereksiz uzatıyordu; sağdaki
     paket ızgarası bitmeden görsel devam ediyordu. 180/200px yeterli. */
  height: 180px; display: flex; align-items: center; justify-content: center;
  border: 0;
}
@media (min-width: 1100px) { .s-svc__hero { height: 200px; } }

/* Degradenin üstündeki yumuşak ışık lekeleri — şablondaki iki daire. */
.s-svc__blob {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); right: -70px; top: -90px; pointer-events: none;
}
.s-svc__blob--2 {
  width: 140px; height: 140px; background: rgba(255, 255, 255, 0.06);
  left: -40px; right: auto; top: auto; bottom: -60px;
}

/* İndirim rozeti — şablonda #D62828; koyu kart üzerinde AA'yı geçmediği
   için temanın kırmızısı kullanıldı. */
.s-svc__off {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 3px 7px; border-radius: var(--r-xs);
  background: var(--card); color: var(--red);
  font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-xs);
}

.s-svc__heroIn {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2);
  color: var(--on-image); text-align: center;
}
.s-svc__heroTile {
  width: 40px; height: 40px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.s-svc__heroIco {
  width: 46px; height: 46px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
}
/* Çıplak sayı yerine paketin adı: iki satıra kadar, sonrası kırpılır. */
.s-svc__heroQ {
  font-family: var(--font-head); font-weight: var(--fw-black);
  font-size: var(--fs-xl); line-height: 1.15; letter-spacing: var(--ls-tight);
  max-width: 16ch; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s-svc__heroU {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9;
}

/* Dört "küçük" paket görseli KALDIRILDI (denetim, madde 07): aşağıdaki
   16'lık ızgara zaten paket seçici; dördüncü küçük 1440 px'te sütun
   kenarından kesiliyordu. Kuralları da bırakılmadı. */

/* ── Seçili paket paneli ───────────────────────────────────────────────
   Eski künye tablosu (hizmet kodu, paket aralığı, fiyat aralığı…) SABİTTİ:
   hangi paket seçilirse seçilsin aynı kalıyordu. Buradaki değerler seçime
   bağlı ve `data-rol` ile güncelleniyor.                                */

.s-sel { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.s-sel__lbl {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--mute);
}
.s-sel__ad { font-family: var(--font-head); font-size: var(--fs-lg); line-height: var(--lh-tight); }

.s-sel__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.s-sel__tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md); background: var(--card-2);
  text-align: center;
}
.s-sel__tileI { color: var(--brand); display: flex; }
.s-sel__tileI svg { width: 20px; height: 20px; }
.s-sel__tile small { font-size: var(--fs-2xs); color: var(--mute); }
.s-sel__tile b { font-family: var(--font-head); font-size: var(--fs-base); }

.s-sel__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-sel__rows li {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm); color: var(--mute);
}
.s-sel__rows li:last-child { border-bottom: 0; }
.s-sel__rows li b { margin-inline-start: auto; text-align: end; color: var(--ink); }
.s-sel__i { color: var(--mute); display: flex; flex: none; }
.s-sel__i svg { width: 16px; height: 16px; }

.s-sel__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.s-sel__feats li {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm); background: var(--card-2);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.s-sel__feats svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* Özellik maddeleri paketin KENDİ satırlarından geliyor; ikon dairesi
   referanstaki gibi. Onay ikonu `viewBox`tan ibaret olduğu için
   ölçüsü burada açıkça veriliyor. */
.s-sel__feats li > svg {
  box-sizing: content-box;
  width: 15px; height: 15px;
  padding: 6px;
  border-radius: 50%;
  background: var(--brand-l);
}
.s-sel__feats li > span { min-width: 0; }
.s-sel__feat--hediye { background: var(--brand-l); color: var(--ink); }
.s-sel__feat--hediye b { color: var(--brand); }

/* ── Orta sütun ────────────────────────────────────────────────────────── */

.s-svc__main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.s-svc__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-svc__badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.s-svc__h1 { font-size: var(--fs-2xl); line-height: 1.15; }
@media (min-width: 700px) { .s-svc__h1 { font-size: 26px; } }

.s-svc__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
  font-size: var(--fs-sm); color: var(--mute);
}
.s-svc__metaItem { display: flex; align-items: center; gap: var(--sp-1); color: inherit; }

/* ÖDEMEYE GEÇİŞ ARA SAYFASI — sipariş kodu ve takip bağlantısı. */
.s-git { max-width: 620px; margin-inline: auto; padding: var(--sp-9) var(--sp-7); text-align: center; }
.s-git__i { display: inline-grid; place-items: center; color: var(--brand); margin-bottom: var(--sp-4); }
.s-git__i svg { width: 34px; height: 34px; }
.s-git__h { font-family: var(--font-head); font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 var(--sp-3); }
.s-git__p { color: var(--mute); font-size: var(--fs-sm); margin: 0 0 var(--sp-7); }
.s-git__kunye {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.s-git__kunye > div {
  flex: 1 1 180px; padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card-2);
}
.s-git__kunye dt { color: var(--mute); font-size: var(--fs-2xs); margin-bottom: 2px; }
.s-git__kunye dd { margin: 0; }
.s-git__kunye dd b {
  font-family: var(--font-head); font-size: var(--fs-lg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.s-git__takip {
  display: flex; flex-direction: column; gap: var(--sp-2); text-align: left;
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-7);
  border: 1px solid var(--brand); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  font-size: var(--fs-sm); color: var(--ink);
}
.s-git__takip a { color: var(--brand); overflow-wrap: anywhere; font-size: var(--fs-xs); }
.s-git__cta { width: 100%; justify-content: center; }
.s-git__not { color: var(--mute); font-size: var(--fs-xs); margin: var(--sp-5) 0 0; }

/* YAPAY ZEKA İLE ÖZETLE — hizmet sayfasının sol sütununda, başlığın
   altında. Marka kareleri `c-tile` deyimini kullanır; burada yeni bir
   döşeme tanımı yok, yalnızca dizilim var. */
.s-yz {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-4); margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2);
}
.s-yz__ust { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.s-yz__i { display: grid; place-items: center; color: var(--brand); flex: none; }
.s-yz__i svg { width: 18px; height: 18px; }
.s-yz__yazi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-yz__yazi b { font-size: var(--fs-sm); color: var(--ink); }
.s-yz__yazi span { font-size: var(--fs-xs); color: var(--mute); }
/* Izgara, esnek kutu değil: esnek kutuda 5 öğe 4+1 diye kırılıyordu
   ve tek kalan öğe kopuk duruyordu. `auto-fit` sütunları sütun
   genişliğine göre böler, satırlar dengeli çıkar. */
.s-yz__liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-3); list-style: none; margin: 0; padding: 0;
}
.s-yz__bag {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 36px; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); color: var(--ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: none;
}
.s-yz__bag:hover { border-color: var(--brand); color: var(--brand); }
.s-yz__bag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Marka karesi. Artık markanın KENDİ glifi basılıyor (bkz.
   `BrandIcon::AI`); baş harf yalnızca glifi olmayan için yedek.

   Buradaki iç hat eskiden BEŞ karonun hepsine koşulsuz konuyordu —
   Claude'un turuncusuna da, Gemini'nin morüne de. Gerek yoktu: hat
   yalnızca siyah zeminli marka (Grok, #111111) koyu kartta kaybolmasın
   diye var. `display.css` bunu zaten `data-koyu='true'` üzerinden
   çiziyor ve `isDark()` hangi markanın koyu olduğunu ölçüyor, o yüzden
   koşulsuz gölge kaldırıldı.

   `.c-tile svg` genel kuralı %60 veriyor; 20/22'de %70'e çıkıyor.
   Buradaki karo 24px ve %60'ta glif 14,4px kalıp cılız duruyordu —
   sosyal karolarla aynı ritim için %70. */
.s-yz__bag .c-tile {
  width: 24px; height: 24px; border-radius: var(--r-sm);
}
.s-yz__bag .c-tile svg { width: 70%; height: 70%; }
.s-yz__bag .c-tile__ltr {
  color: var(--tile-ink, #fff);
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 640px) {
  .s-yz { padding: var(--sp-4) var(--sp-5); }
  /* Dar ekranda sütun eşiği düşer ki 5 öğe 3+2 kalsın; 132px'te
     2+2+1 oluyor ve son öğe kopuk duruyordu. */
  .s-yz__liste { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--sp-2); }
  .s-yz__bag { padding-inline: var(--sp-2); }
}
a.s-svc__metaItem { color: var(--brand); min-height: 24px; }
.s-svc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }

.s-svc__pkg { padding: var(--sp-8); }
.s-svc__pkgHead {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5); margin-bottom: var(--sp-5);
}
.s-svc__pkgHead b { font-size: var(--fs-lg); }
.s-svc__pkgList {
  border: 0; margin: 0; padding: 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* Paket satırı.
   Şablonda seçili olmayan satırların zemini #fff, yazı rengi ise koyu
   temanın açık grisi — ölçülen kontrast 1.05:1, yani metin görünmüyor.
   Şablonun açık tema taslağından kalmış bir hata; marka rengine
   dokunmadan satır zemini temanın yüzeyine alındı. */
.s-svc__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--card-2); cursor: pointer;
}
@media (min-width: 560px) {
  .s-svc__row { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--sp-5); }
}
.s-svc__row:hover { border-color: var(--mute); }
.s-svc__row[data-selected='true'] { border-color: var(--brand); background: var(--brand-l); }
.s-svc__row:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.s-svc__radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--mute); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.s-svc__row[data-selected='true'] .s-svc__radio { border-color: var(--brand); }
.s-svc__row[data-selected='true'] .s-svc__radio::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
}
.s-svc__rowQ { font-size: var(--fs-lg); color: var(--ink); white-space: nowrap; }
@media (min-width: 560px) { .s-svc__rowQ { min-width: 120px; } }
.s-svc__rowNote {
  display: none;
  font-size: var(--fs-xs); color: var(--mute); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-svc__rowNote[data-strong='true'] { color: var(--brand); font-weight: var(--fw-bold); }
@media (min-width: 560px) { .s-svc__rowNote { display: block; } }
.s-svc__rowP { justify-self: end; white-space: nowrap; }

.s-svc__pkgNote {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--mute);
}
.s-svc__pkgNote svg { color: currentColor; }

.s-svc__tabs { overflow: hidden; }
.s-svc__faq { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.s-svc__faq dt { font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-2); }
.s-svc__faq dd { margin: 0; color: var(--ink-2); }
.s-svc__reviews { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.s-svc__reviews li { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.s-svc__reviews li:last-child { border-bottom: 0; padding-bottom: 0; }
.s-svc__reviewTop { display: flex; justify-content: space-between; gap: var(--sp-5); color: var(--gold); }
.s-svc__reviewTop strong { color: var(--ink); }
.s-svc__starOff { color: var(--line); }

/* ── Sağ sütun: satın alma ─────────────────────────────────────────────── */

.s-svc__buy { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 1100px) { .s-svc__buy { position: sticky; top: var(--sp-7); } }

.s-svc__panel {
  padding: var(--sp-9);
  display: flex; flex-direction: column; gap: var(--sp-5);
  border-top: 4px solid var(--brand);
}
.s-svc__priceRow { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }
.s-svc__priceCol { display: flex; flex-direction: column; line-height: 1; }
.s-svc__priceCol .c-price--lg { font-size: var(--fs-price); }

.s-svc__field {
  display: flex; align-items: stretch;
  height: 46px; overflow: hidden;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-2);
}
.s-svc__field:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.s-svc__field[data-invalid] { border-color: var(--red); }
.s-svc__prefix {
  display: flex; align-items: center; padding: 0 var(--sp-5);
  background: var(--bg); color: var(--mute); border-right: 1px solid var(--line);
}
.s-svc__input {
  flex: 1; min-width: 0; padding: 0 var(--sp-5);
  background: transparent; border: 0; color: var(--ink);
}
.s-svc__input:focus { outline: none; }

.s-svc__step {
  display: flex; align-items: stretch; height: 46px; overflow: hidden;
  border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--card-2);
}
.s-svc__step button {
  width: 46px; flex: none; border: 0; cursor: pointer;
  background: var(--bg); color: var(--ink-2); font-size: var(--fs-xl);
}
.s-svc__step button:hover:not(:disabled) { color: var(--brand); }
.s-svc__step button:disabled { color: var(--line); cursor: not-allowed; }
.s-svc__stepV {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-xl);
}

.s-svc__cta { height: 50px; font-size: var(--fs-lg); }
/* İKİ DÜĞME YAN YANA — kullanıcının verdiği referans.
   Hiyerarşi RENKLE değil DOLGUYLA kuruluyor: dolu marka zemini
   birincil, aynı renkte çerçeve ikincil. İki dolu düğme olsaydı
   hangisinin ana eylem olduğu belirsiz kalırdı. */
.s-svc__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.s-svc__ctas .c-btn {
  min-height: 50px;
  gap: var(--sp-3);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.s-svc__ctas svg { width: 17px; height: 17px; flex: none; }

.s-svc__cta2 {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.s-svc__cta2:hover:not(:disabled) { background: var(--brand-l); }
.s-svc__cta2:disabled { opacity: .5; cursor: not-allowed; }

/* Hangi paketin alındığı düğmelerin altında bir kez yazılı: düğme
   metinlerine fiyat sığdırmak "Sepete Ekle · 55,00 ₺" gibi iki satıra
   düşen etiketler üretiyordu. */
.s-svc__ctaTutar {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--mute);
}
.s-svc__ctaTutar b { color: var(--ink); font-weight: var(--fw-semibold); }

@media (max-width: 380px) {
  .s-svc__ctas { grid-template-columns: 1fr; }
}

/* Panel kimliği: fiyatın neyin fiyatı olduğu ilk ekranda yazılı
   (denetim, madde 02). */
.s-svc__panelId {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  min-width: 0;
}
.s-svc__panelSvc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.s-svc__panelPkg {
  font-size: var(--fs-xs);
  color: var(--mute);
}

/* Fiyatın yanındaki rozetler: indirim + hediye (denetim, madde 07). */
.s-svc__priceTags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
}

/* Uzun uyarı: tek satır ipucu + açılır detay (denetim, madde 02). */
.s-svc__neden { margin-top: var(--sp-2); }
.s-svc__neden > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.s-svc__neden > summary::-webkit-details-marker { display: none; }
.s-svc__neden > summary::after { content: ' \203A'; margin-inline-start: 4px; }
.s-svc__neden[open] > summary::after { content: ' \2039'; }
.s-svc__neden > p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--mute);
  line-height: 1.55;
}
.s-svc__pay { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: center; }

/* Ödeme yöntemleri BUTON DEĞİL, bilgi (denetim, madde 02): dolu gri
   haplar tıklanabilir sanılıyordu ve "pasif buton" gibi duruyordu.
   Aynı metin, düğme görünümü yok. */
.s-svc__pay .thz-badge {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  color: var(--mute);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.s-svc__trust {
  list-style: none; margin: 0; padding: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.s-svc__trust li { display: flex; align-items: center; gap: var(--sp-4); }
.s-svc__trust svg { color: var(--brand); }

/* ── İlgili hizmetler ──────────────────────────────────────────────────── */

.s-related { margin-top: var(--sp-14); padding-bottom: var(--sp-14); }
.s-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (min-width: 700px) { .s-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .s-related__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── Hizmet kartı ──────────────────────────────────────────────────────── */

.s-card {
  display: flex; flex-direction: column;
  color: var(--ink); overflow: hidden; position: relative;
}
.s-card:hover { border-color: var(--brand); }
.s-card__vis {
  position: relative; overflow: hidden;
  height: 140px; display: flex; align-items: center; justify-content: center;
}
.s-card__visIn {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2); color: var(--on-image); text-align: center;
}
.s-card__badge { position: absolute; left: 10px; top: 10px; }
.s-card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.s-card__kicker {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); color: var(--mute); text-transform: uppercase;
}
.s-card__name { font-size: var(--fs-base); line-height: 1.3; min-height: 38px; }
.s-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }
.s-card__priceCol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s-card__go {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
}
.s-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); color: var(--mute);
  border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: 2px;
}
.s-card__meta > span { display: flex; align-items: center; gap: var(--sp-1); }

/* ── Makale ────────────────────────────────────────────────────────────── */

.s-article { color: var(--ink-2); line-height: var(--lh-loose); }
.s-article > * + * { margin-top: var(--sp-7); }
.s-article h2 { font-size: var(--fs-2xl); margin-top: var(--sp-12); }
.s-article h3 { font-size: var(--fs-xl); margin-top: var(--sp-10); }
.s-article ul, .s-article ol { padding-inline-start: var(--sp-11); }
.s-article table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.s-article th, .s-article td { padding: var(--sp-3) var(--sp-5); border: 1px solid var(--line); text-align: start; }

/* ── Kimlik sayfaları ─────────────────────────────────────────────────── */

.s-auth { display: flex; justify-content: center; padding-block: var(--sp-14); }
.s-auth__card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--sp-7);
  padding: var(--sp-12);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.s-auth__card h1 { font-size: var(--fs-2xl); }
.s-auth__form { display: flex; flex-direction: column; gap: var(--sp-7); }
.s-auth__foot { text-align: center; font-size: var(--fs-md); }
.s-auth__note {
  padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--brand-l); border: 1px solid rgba(34,181,115,.3);
  color: var(--brand); font-size: var(--fs-md);
}
.s-auth__card p a { display: inline-flex; align-items: center; min-height: 24px; }

/* ── Hesap alanı ──────────────────────────────────────────────────────── */

.s-acc { display: grid; gap: var(--sp-9); padding-block: var(--sp-10) var(--sp-14); }
@media (min-width: 900px) { .s-acc { grid-template-columns: 224px minmax(0, 1fr); gap: var(--sp-12); align-items: start; } }
.s-acc__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 900px) { .s-acc__side { position: sticky; top: calc(80px + var(--sp-5)); } }
.s-acc__who {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); min-width: 0;
}
.s-acc__who strong { color: var(--ink); font-family: var(--font-head); }
.s-acc__who span { overflow-wrap: anywhere; }
.s-acc__nav { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.s-acc__nav::-webkit-scrollbar { display: none; }
.s-acc__nav a {
  display: inline-flex; align-items: center; gap: var(--sp-3); flex: none;
  min-height: var(--tap); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); color: var(--ink-2);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap;
}
.s-acc__nav a:hover { background: var(--card-2); color: var(--ink); }
.s-acc__nav svg { color: var(--mute); }
@media (min-width: 900px) { .s-acc__nav { flex-direction: column; overflow-x: visible; } .s-acc__nav a { width: 100%; } }
.s-acc__main { min-width: 0; }
.s-acc__h2 { font-size: var(--fs-xl); }
.s-acc__stat { font-family: var(--font-head); font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--ink); }
.s-acc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.s-acc__list > li > a, .s-acc__list--plain > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  min-height: var(--tap); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink-2);
}
.s-acc__list > li > a:hover { border-color: var(--brand); }
.s-acc__lm { display: flex; flex-direction: column; gap: 2px; flex: 1 1 12rem; min-width: 0; }
.s-acc__lm strong { color: var(--ink); }
.s-acc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.s-acc__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-7); margin: 0; font-size: var(--fs-md); }
.s-acc__meta dt { color: var(--mute); }
.s-acc__meta dd { margin: 0; color: var(--ink-2); min-width: 0; }
.s-acc__target { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-xs); }
.s-acc__tot { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.s-acc__tot > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-7); font-size: var(--fs-md); }
.s-acc__tot-f { padding-top: var(--sp-3); border-top: 1px solid var(--line); font-weight: var(--fw-bold); color: var(--ink); }
.s-acc .c-card__body a { display: inline-flex; align-items: center; min-height: 24px; }


/* ══ MOBİL ─ `_tasarim/MobilAnaSayfa.dc.html` ölçüleriyle ═══════════════
   Mobil tasarım masaüstünden türetilmedi; ayrı bir onaylı artboard var.

   Üst bant 30px · başlık 12/16 iç boşluk, iki satır (logo satırı + arama)
   Logo karosu 30×30 (radius 8), sözcük markası 18px
   Arama 44px, 2px marka kenarlık, 48px düğme
   Platform şeridi: 60px genişliğinde dikey çipler, 11px etiket
   Sepet rozeti kırmızı (masaüstünde marka yeşili)
*/
@media (max-width: 1023px) {
  .s-topbar__in { justify-content: center; min-height: 30px; font-size: var(--fs-xs); }

  .s-header__row {
    min-height: 0;
    padding-block: var(--sp-5);
    gap: var(--sp-4);
  }
  .s-brand__mark { width: 30px; height: 30px; border-radius: var(--r-md); font-size: 17px; }
  .s-brand__name { font-size: var(--fs-xl); }
  .s-acts { gap: var(--sp-6); }
  .s-act--menu { margin-inline-end: var(--sp-1); }

  .s-header__msearch { padding-bottom: var(--sp-5); }
  .s-msearch { height: 44px; border-radius: var(--r-sm); }

  /* Sepet rozeti mobil artboard'da kırmızı. */
  .s-cart__n { background: var(--red); color: var(--on-image); }

  /* Platform şeridi: yatay metin yerine dikey çipler. */
  .s-nav__in { padding-block: var(--sp-4); }
  .s-nav__list { gap: var(--sp-2); }
  .s-nav__link {
    flex-direction: column;
    gap: var(--sp-2);
    width: 60px;
    height: auto;
    padding: 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    border-bottom: 0;
    line-height: 1.2;
  }
  .s-nav__link > span { overflow: hidden; text-overflow: ellipsis; width: 100%; }
  .s-nav__link:hover { border-bottom-color: transparent; }
  .s-nav__link .c-tile { width: 30px; height: 30px; }
  .s-nav__more > details > .s-nav__link { width: 60px; }
  .s-nav__more .s-nav__chev { display: none; }
}

/* ── Sepet ve sipariş ─────────────────────────────────────────────────────
   ZIP'te sepet/sipariş artboard'ı YOK. Düzen, onaylı hizmet sayfasının
   satın alma bloğuyla aynı aileden türetildi: içerik solda, özet sağda
   360px ve yapışkan. Yeni bir görsel dil uydurulmadı.
   ───────────────────────────────────────────────────────────────────────── */

.s-cartp { display: grid; gap: var(--sp-9); align-items: start; }
@media (min-width: 1000px) { .s-cartp { grid-template-columns: minmax(0, 1fr) 360px; } }

.s-cartp__main { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
.s-cartp__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 1000px) { .s-cartp__side { position: sticky; top: var(--sp-7); } }

.s-cartp__dropped { margin: 0; padding-inline-start: var(--sp-9); }

.s-cartp__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.s-cartp__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-5); padding: var(--sp-6);
}
.s-cartp__lineInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-cartp__lineInfo b { font-size: var(--fs-base); }
.s-cartp__target {
  font-size: var(--fs-xs); color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-cartp__linePrice { justify-self: end; white-space: nowrap; }
.s-cartp__lineDel { display: flex; }

.s-cartp__form { padding: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-7); }
.s-cartp__form h2 { font-size: var(--fs-xl); }
.s-cartp__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .s-cartp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.s-cartp__sumTitle { font-size: var(--fs-lg); }
.s-cartp__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5); font-size: var(--fs-md); color: var(--ink-2);
}
.s-cartp__row[data-tone='brand'] { color: var(--brand); }
.s-cartp__row > span { display: flex; align-items: center; gap: var(--sp-3); }
.s-cartp__row--total {
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
  color: var(--ink); font-weight: var(--fw-bold);
}
.s-cartp__coupon { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.s-cartp__couponRow { display: flex; gap: var(--sp-3); }
.s-cartp__couponRow .c-input { flex: 1; min-width: 0; }

.s-order { display: flex; flex-direction: column; gap: var(--sp-7); }
.s-order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; }
.s-order__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.s-order__sum { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 420px; margin-inline-start: auto; }

/* ── Ücretsiz araç sayfası ────────────────────────────────────────────────
   Ölçüler onaylı `_tasarim/AracSayfasi.dc.html` şablonundan:
   grid 1fr 340px / gap 20 · sol sütun gap 16 · hero metni max-w 520 ·
   giriş satırı 52px · "Nasıl çalışır?" kartı padding 18 20 ·
   SSS kartı padding 22 · sağ kutular padding 16 gap 8.
   ───────────────────────────────────────────────────────────────────────── */

.s-tool { display: grid; gap: var(--sp-9); align-items: start; padding-bottom: var(--sp-14); }
@media (min-width: 1000px) { .s-tool { grid-template-columns: minmax(0, 1fr) 340px; } }

.s-tool__main { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
.s-tool__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 1000px) { .s-tool__side { position: sticky; top: var(--sp-7); } }

.s-tool__hero { padding: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-5); }
.s-tool__badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.s-tool__h1 { font-size: var(--fs-2xl); line-height: 1.15; }
@media (min-width: 700px) { .s-tool__h1 { font-size: 26px; } }
.s-tool__intro { max-width: 520px; color: var(--ink-2); }

.s-tool__runner { display: flex; flex-direction: column; gap: var(--sp-5); }
.s-tool__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-tool__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.s-tool__field { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-tool__field .c-input { height: 52px; }
.s-tool__go { height: 52px; flex: none; }

.s-tool__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s-tool__chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-2); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

.s-tool__result { padding: var(--sp-8); }
.s-tool__outputs { margin: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.s-tool__outputs dt { font-size: var(--fs-xs); color: var(--mute); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.s-tool__outputs dd { margin: var(--sp-2) 0 0; color: var(--ink); }
.s-tool__text { word-break: break-word; font-size: var(--fs-lg); }
.s-tool__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s-tool__list li {
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm);
  background: var(--card-2); font-size: var(--fs-sm);
}

.s-tool__article { padding: var(--sp-10); }
/* Araç makalesi de aynı ölçüde: kart 880 px genişken içindeki metin
   541 px'de kalıyordu. */
.s-tool__article .thz-icerik { max-width: 88ch; }
.s-tool__faq { padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-7); }
.s-tool__faq h2 { font-size: var(--fs-2xl); }
.s-tool__note {
  padding: var(--sp-6); border-radius: var(--r-md);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}

.s-tool__box { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
.s-tool__box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-tool__box a { font-size: var(--fs-md); }
.s-tool__box .c-btn { align-self: flex-start; }

.s-tools__groups { display: flex; flex-direction: column; gap: var(--sp-12); }
.s-tools__groupTitle { font-size: var(--fs-xl); margin-bottom: var(--sp-6); text-transform: capitalize; }
.s-tools__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.s-tools__card { padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink); }
.s-tools__card:hover { border-color: var(--brand); }

/* Önizleme kipinde çalışan araç sonucu — gerçek sonuçla karışmasın. */
.s-tool__result[data-mode='simulated'] { border-color: var(--yel-b); background: var(--yel); }
.s-tool__badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-4);
  border-radius: var(--r-xs); background: var(--card); color: var(--gold);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-bottom: var(--sp-5);
}

/* ── Hizmet sayfası alt bölümleri ─────────────────────────────────────────
   Uzun THZ makalesi, SSS, yorumlar ve iç bağlantılar sipariş bloğunun
   ALTINDA, tam genişlikte. Makale `thz-content.css` ile biçimleniyor;
   burada yalnızca yerleşimi var. */

/* ══ İÇERİK HARİTASI ═══════════════════════════════════════════════════
   Uzun makalelerin başındaki gezinme kartı. Düz bağlantı listesi değil:
   numaralı kutucuk + iki sütunlu ızgara + katlanabilir başlık. Renkler
   ve ölçüler mevcut belirteçlerden; yeni bir renk ya da yarıçap
   üretilmedi.                                                          */

.ic-harita {
  margin-block: var(--sp-7) var(--sp-9);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  /* Sol kenardaki marka şeridi kartı gövde metninden ayırır. */
  border-inline-start: 3px solid var(--brand);
  overflow: hidden;
}

.ic-harita__ust {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 10%, var(--card)), var(--card));
}
/* Tarayıcının kendi üçgeni gizleniyor; kendi okumuz var. */
.ic-harita__ust::-webkit-details-marker { display: none; }
.ic-harita__ust::marker { content: ''; }
.ic-harita__ust:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, var(--card)), var(--card)); }
.ic-harita__ust:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.ic-harita__et {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-head);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--ink);
}
/* Üç çizgili küçük işaret — ikon fontu yok, saf CSS. */
.ic-harita__ikon {
  width: 14px; height: 10px; flex: none;
  background:
    linear-gradient(var(--brand), var(--brand)) top left / 100% 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center left / 70% 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) bottom left / 45% 2px no-repeat;
}
.ic-harita__meta { font-size: var(--fs-xs); color: var(--mute); }
.ic-harita__ok {
  margin-inline-start: auto; flex: none;
  width: 8px; height: 8px;
  border-inline-end: 2px solid var(--mute); border-block-end: 2px solid var(--mute);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ic-harita[open] .ic-harita__ok { transform: rotate(-135deg); }

.ic-harita__liste {
  list-style: none; margin: 0;
  padding: var(--sp-3) var(--sp-6) var(--sp-6);
  display: grid; gap: 2px;
  border-block-start: 1px solid var(--line);
}
@media (min-width: 760px) { .ic-harita__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); } }

.ic-harita__liste a {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ic-harita__liste a:hover { background: var(--card-2); color: var(--ink); }
.ic-harita__liste a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.ic-harita__n {
  flex: none;
  min-width: 24px; padding: 2px 6px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-family: var(--font-head);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ic-harita__liste a:hover .ic-harita__n { background: var(--brand); color: var(--on-brand); }
.ic-harita__t { min-width: 0; }

/* Çıpaya atlayınca başlık yapışkan üst çubuğun altında kalmasın. */
.thz-icerik :is(h2, h3)[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  .ic-harita__ok, .ic-harita__liste a, .ic-harita__n { transition: none; }
}

/* ── Yan sütundaki yapışkan ray ────────────────────────────────────
   Kart makalenin BAŞINDA; okuyucu üçüncü bölümdeyken artık ekranda
   değil. Geniş ekranda aynı harita yan sütunda kalıyor ve okunan bölüm
   işaretleniyor.                                                       */

.ic-ray { display: none; }

@media (min-width: 1000px) {
  /* AYNI ANDA TEK HARİTA. Kart ve ray yan yana duruyordu: iki
     "İçindekiler" başlığı, aynı yedi satır, iki kez. Geniş ekranda ray
     kalıyor (kaydırmayı takip ediyor), kart gizleniyor; dar ekranda ray
     zaten basılmıyor ve kart kalıyor.

     `:has()` ŞART: hizmet ve araç sayfalarında ray YOK, orada kart her
     genişlikte kalmalı. Kuralı raya sahip düzenle sınırlıyor. */
  .s-icerik:has(.ic-ray) .ic-harita { display: none; }

  .ic-ray {
    display: block;
    padding: var(--sp-6);
    border: 1px solid var(--line); border-radius: var(--r-card);
    border-inline-start: 3px solid var(--brand);
    background: var(--card);
  }
  .ic-ray__b {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-bottom: var(--sp-5); padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink);
  }
  .ic-ray__b .ic-harita__ikon { width: 12px; height: 9px; }
  .ic-ray__b span { margin-inline-start: auto; font-weight: var(--fw-normal);
    letter-spacing: 0; text-transform: none; color: var(--mute); font-family: var(--font-body); }

  .ic-ray__l { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
  .ic-ray__l a {
    display: flex; align-items: baseline; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-tight);
    text-decoration: none;
  }
  .ic-ray__l a:hover { background: var(--card-2); color: var(--ink); }
  .ic-ray__l a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  /* Satır metni iki satıra sarabilir: kırpmak uzun başlıkları
     ayırt edilemez hâle getiriyordu ("TikTok Profil Görüntüleme…" ×3). */
  .ic-ray__t { min-width: 0; }
  .ic-ray__l a[aria-current='true'] {
    color: var(--brand); font-weight: var(--fw-bold);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
  }
  .ic-ray__l a[aria-current='true'] .ic-harita__n { background: var(--brand); color: var(--on-brand); }
}

/* ── İÇERİK + SATIŞ SÜTUNU ──────────────────────────────────────────
   Blog yazısı, kök içerik sayfası ve sözlük terimi ortada dar bir metin
   bandıydı: `--w-prose` genişliğinde ortalanıyor, geniş ekranda iki yanı
   boş kalıyordu. Sağdaki boşluk artık araç sayfasındaki satış sütununu
   taşıyor — aynı 340 px'lik iz, aynı bileşenler.

   `--yan` sınıfı YALNIZCA sütun basılacaksa ekleniyor; yoksa düzen tek
   sütun kalır ve hiçbir şey değişmez.                                  */

.s-icerik { display: grid; gap: var(--sp-9); align-items: start; padding-bottom: var(--sp-14); }
@media (min-width: 1000px) {
  /* IZGARA ORTALANMIYOR. Ortalanınca sütunlar (74ch + 340) sarmalayıcının
     ortasına düşüyor ve gövde, ÜSTÜNDEKİ başlıktan 164 px içeriden
     başlıyordu: başlık tam genişlik, metin ortada dar bir sütun —
     sıkışık görünmesinin sebebi buydu.

     Ana sütun `1fr`: gövdenin sol kenarı `h1` ile aynı hizada, yan sütun
     sağ kenara yapışık. Metnin sağındaki boşluk okuma payı olarak
     duruyor, ortada asılı bir blok değil. */
  .s-icerik--yan { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Yan sütunlu düzende de aynı ölçü: 1440 px'te ana sütun 880 px, metin
     ~700 px, kalanı okuma payı. Dar ekranda sütun zaten 88ch'ten küçük
     olduğu için sınır hiç devreye girmiyor. */
  .s-icerik--yan .s-longform__body { max-width: 88ch; margin-inline: 0; }
}
.s-icerik__ana { min-width: 0; }
.s-icerik__yan { min-width: 0; }

/* ── MAKALE ÖLÇÜSÜ ─────────────────────────────────────────────────
   `--w-prose` 68ch (541 px) ve `margin-inline: auto` ile metin, yan
   sütunun olmadığı genişliklerde sayfanın ortasında dar bir bant olarak
   kalıyordu: 960 px'lik bir pencerede sağında 370 px boşluk vardı.

   Ölçü 88ch'e çıkarıldı (~700 px) ve sola hizalandı — gövde başlıkla
   aynı kenardan başlıyor. `max-width` yalnızca GENİŞ ekranda devreye
   giriyor; sütun dardaysa metin sütunu tamamen dolduruyor. 88ch
   rahat okunan üst sınırın ucunda; daha fazlası satır sonunda gözün
   sonraki satırın başını kaybetmesine yol açıyor.                     */
.s-icerik .s-longform__body { max-width: 88ch; margin-inline: 0; }

.s-longform { padding-block: var(--sp-14); border-top: 1px solid var(--line); margin-top: var(--sp-14); }
/* Hizmet ve araç sayfasındaki makale `.s-icerik` içinde değil; ölçüyü
   orada da 88ch'e çıkarıyoruz. 1240 px'lik bantta 541 px'lik ortalanmış
   bir sütun, iki yanında 350 px boşluk bırakıyordu. */
.s-longform .s-longform__body { max-width: 88ch; }
.s-longform__body { margin-inline: auto; }

.s-faqsec { padding-bottom: var(--sp-14); }
.s-faqsec .c-accordion { max-width: var(--w-prose); }

.s-reviews { padding-bottom: var(--sp-14); }
.s-reviews__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.s-review { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.s-review__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); }
.s-review__stars { color: var(--gold); white-space: nowrap; }
.s-review__off { color: var(--line); }
.s-review p { color: var(--ink-2); font-size: var(--fs-md); }

.s-links { padding-bottom: var(--sp-14); }
.s-links__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.s-links__row a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2);
  font-size: var(--fs-md);
}
.s-links__row a:hover { border-color: var(--brand); color: var(--brand); }

/* ── PHP sürümü: ek düzen parçaları ───────────────────────────────────── */

.c-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-block: var(--sp-6); font-size: var(--fs-sm); color: var(--mute);
}
.c-breadcrumb a { color: var(--mute); }
.c-breadcrumb a:hover { color: var(--brand); }
.c-breadcrumb [aria-current] { color: var(--ink); }

.s-nav__pills { display: flex; gap: var(--sp-2); flex: none; }

.s-faqsec__list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: var(--w-prose); }
.s-faqsec__item { overflow: hidden; }
.s-faqsec__item summary {
  padding: var(--sp-6) var(--sp-7); min-height: var(--tap);
  display: flex; align-items: center; cursor: pointer;
  color: var(--ink); font-weight: var(--fw-semibold); list-style: none;
}
.s-faqsec__item summary::-webkit-details-marker { display: none; }
.s-faqsec__item summary::after {
  content: '+'; margin-inline-start: auto; color: var(--brand);
  font-size: var(--fs-xl); line-height: 1;
}
.s-faqsec__item[open] summary::after { content: '−'; }
.s-faqsec__answer { padding: 0 var(--sp-7) var(--sp-7); color: var(--ink-2); }

.s-footer { background: var(--card); border-top: 1px solid var(--line); margin-top: var(--sp-14); }
.s-footer__grid {
  display: grid; gap: var(--sp-11); padding-block: var(--sp-12);
  grid-template-columns: 1.4fr repeat(auto-fit, minmax(140px, 1fr));
}
.s-footer__grid h4 {
  font-size: var(--fs-md); margin-bottom: var(--sp-5);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.s-footer__grid a { display: block; color: var(--mute); font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.s-footer__grid a:hover { color: var(--brand); }
.s-footer__brand p { margin: var(--sp-5) 0; color: var(--mute); }
.s-footer__legal { border-top: 1px solid var(--line); }
.s-footer__legalIn {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 64px; font-size: var(--fs-sm); color: var(--mute); gap: var(--sp-6); flex-wrap: wrap;
}

/* ── Platform kartları (ana sayfa "Kategoriler") ──────────────────────
   Onaylı şablondaki kart: marka karesi + ad + "N hizmet · X ₺'den".
   Fiyat satırı yalnızca gerçek paket varsa basılır — şablon boş fiyat
   göstermiyor, biz de göstermiyoruz.                                    */
.s-plats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (min-width: 640px)  { .s-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .s-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .s-plats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.s-plats__card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink);
  min-width: 0;
}
.s-plats__card:hover { border-color: var(--brand); }

.s-plats__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.s-plats__txt b {
  font-size: var(--fs-md);
  line-height: 1.25;
}
.s-plats__meta {
  font-size: var(--fs-sm);
  color: var(--mute);
  white-space: nowrap;
}

/* Glifi olmayan platform: boş kare yerine baş harf — eksiklik görünsün. */
.c-tile__ltr {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.62em;
  color: var(--ink);
  line-height: 1;
}

/* "Diğer" panelindeki bağlantılar da marka karesiyle hizalanır. */
.s-nav__panel a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Hediye satırı vurgulanıyor: paneldeki tek "kazanç" bilgisi. */
.s-sel__gift b { color: var(--brand); }
.s-sel__gift .s-sel__i { color: var(--brand); }

/* ── Destek yazışması (müşteri) ────────────────────────────────────────
   Panel tarafındaki `.a-msg` ile aynı fikir: iki taraf renkle DEĞİL
   konumla ve kenarlıkla ayrılıyor. */
.s-destek { display: flex; flex-direction: column; gap: var(--sp-5); }
.s-destek__m { padding: var(--sp-5); border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); }
.s-destek__m--panel { background: var(--brand-l); border-color: var(--brand); }
.s-destek__m > header { display: flex; gap: var(--sp-4); align-items: baseline; margin-block-end: var(--sp-3); }
.s-destek__m > p { margin: 0; color: var(--ink-2); line-height: var(--lh-body); }