/* ============================================================
   Reggeo — site (reggeo.com) stilleri
   ------------------------------------------------------------
   Global: token'lar, iskelet, üst bar, alt bilgi, butonlar.
   Sayfaya özel kurallar aşağıda #page-<slug> altında.

   Varsayımlar (tasarımdaki ham değerler):
   - Renkler ve fontlar panelle aynı (Satoshi başlık, Inter metin).
   - İçerik genişliği 1240px; breakpoint'ler 1024px, 768px, 560px
     (masaüstü taban, max-width ile daralır).
   ============================================================ */

:root {
  --c-primary: #0E3B38;
  --c-primary-hover: #24554F;
  --c-lime: #A8D62A;
  --c-lime-dark: #7FA71A;
  --c-lime-soft: #EEF8D2;
  --c-lime-text: #3F5A0A;
  --c-live: #73af00;
  --c-sand: #E6E8E6;
  --c-soft: #f5f7fa;
  --c-text: #0E3B38;
  --c-text-2: #515a6e;
  --c-muted: #616675;
  --c-muted-2: #9296a5;
  --c-faint: #b3b9c5;
  --c-line: #eaeaee;
  --c-line-2: #e1e3ea;
  --c-input: #d5d9d5;
  --c-red: #c10007;
  --c-warn: #e17100;
  --f-display: "Satoshi", sans-serif;
  --f-text: "Inter", sans-serif;
  --f-mono: ui-monospace, Menlo, monospace;
  --w: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #ffffff; color: var(--c-text); font-family: var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: var(--c-text); text-decoration: none; }
a:hover { color: var(--c-primary-hover); }
button, input, select, textarea { font-family: var(--f-text); color: var(--c-text); }
input:focus, textarea:focus, select:focus { outline: none; }
::placeholder { color: var(--c-faint); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site { padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 100vh; }
.site > main { display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* bölüm kabuğu: 1240px, yuvarlak köşe */
.block { max-width: var(--w); margin: 0 auto; width: 100%; border-radius: 22px; }
.block.sand { background: var(--c-sand); }
.block.dark { background: var(--c-primary); color: #ffffff; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c-lime); flex: none; }
.eyebrow.live::before { border-radius: 9999px; background: var(--c-live); }
.h2 { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 34px; letter-spacing: -0.03em; margin: 0; text-wrap: pretty; }
.h1 { font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: -0.04em; margin: 0 0 12px; text-wrap: pretty; }
.lead { font-size: 14px; line-height: 23px; color: var(--c-muted); margin: 0; text-wrap: pretty; }
.live-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--c-live); }

/* butonlar */
.dark-btn { height: 36px; padding: 0 16px; border-radius: 9999px; border: none; background: var(--c-primary); font-size: 13px; font-weight: 600; color: #ffffff; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.dark-btn:hover { background: var(--c-primary-hover); color: #ffffff; }
.dark-btn.lg { height: 48px; padding: 0 26px; }
.line-btn { height: 40px; padding: 0 18px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.line-btn:hover { background: var(--c-primary); color: #ffffff; border-color: var(--c-primary); }
.ghost-btn { white-space: nowrap; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: none; border-radius: 9999px; background: transparent; font-size: 13px; font-weight: 500; color: var(--c-text-2); cursor: pointer; }
.ghost-btn:hover { background: var(--c-soft); }
.ghost-btn i { font-size: 14px; }
.icon-btn { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--c-text-2); }
.icon-btn:hover { background: var(--c-soft); color: var(--c-primary); }
.icon-btn i { font-size: 16px; }

/* liste satırı aksiyonu (Satın Al / Backorder Ver / Teklif Ver) */
.act-btn { flex: none; width: 164px; height: 42px; padding: 0 16px; border-radius: 9999px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d9ddd9; background: #ffffff; color: var(--c-primary); transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.act-btn i { font-size: 16px; }
.act-btn.fill, .act-btn:hover { border-color: var(--c-primary); background: var(--c-primary); color: #ffffff; }
.act-btn.fill:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }

/* durum etiketleri */
.chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 6px 13px; white-space: nowrap; background: #f3f4f6; color: var(--c-text-2); }
.chip.backorder { background: var(--c-sand); color: #1C4F4A; }
.chip.auction { background: var(--c-lime-soft); color: var(--c-lime-text); }
.chip.ok { background: #f1ffd9; color: #496e2d; }
.chip.taken { background: #f3f4f6; color: var(--c-text-2); }

/* arama kutusu (iç sayfalar) */
.search-box { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; }
.search-box i { font-size: 17px; color: var(--c-muted-2); }
.search-box input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 14px; }
.search-box:focus-within { border-color: var(--c-primary); }

.form-err { font-size: 12px; color: var(--c-red); }
.empty { padding: 56px 0; text-align: center; }
.empty .t { font-family: var(--f-display); font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.empty .d { font-size: 13px; color: var(--c-muted); margin-bottom: 18px; }
.loading { padding: 40px 0; text-align: center; font-size: 13px; color: var(--c-muted); }
.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border-radius: 9999px; border: 2px solid var(--c-line-2); border-top-color: var(--c-primary); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tablo başlığı (liste kolonları) */
.cols-head { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-2); }

/* ---------- üst bar ---------- */
.header-area { width: 100%; margin: 0 auto; height: 50px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header-area .logo { display: flex; align-items: center; justify-content: center; }
.header-area .logo img { height: 22px; width: auto; display: block; }
.header-area .right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.header-area.inner { max-width: var(--w); padding: 0 16px; }
.header-area.inner .back { font-size: 13px; color: var(--c-muted); display: flex; align-items: center; gap: 6px; }
.header-area.inner .back i { font-size: 15px; }
.header-area.home { position: sticky; top: 12px; z-index: 40; max-width: 100%; transition: max-width 420ms cubic-bezier(.22,.61,.36,1); padding: 0 8px 0 6px; background: rgba(255,255,255,0.62); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(30,33,41,0.05), 0 8px 24px rgba(30,33,41,0.04); }
.header-area.home.narrow { max-width: 560px; }
.header-area .menu { position: relative; }
.header-area .drop { position: absolute; top: 46px; left: 0; width: 220px; background: #ffffff; border: 1px solid var(--c-line-2); border-radius: 11px; padding: 14px; box-shadow: 0 12px 32px rgba(30,33,41,0.08); }
.header-area .drop .t { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 8px; }
.header-area .seg { display: flex; height: 34px; border: 1px solid var(--c-line-2); border-radius: 9999px; overflow: hidden; }
.header-area .seg button { flex: 1; height: 34px; padding: 0 10px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; background: #ffffff; color: var(--c-muted); }
.header-area .seg button.on { background: var(--c-primary-hover); color: #ffffff; }
.header-area .seg a { flex: 1; height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: #ffffff; color: var(--c-muted); }
.header-area .seg a.on { background: var(--c-primary-hover); color: #ffffff; }
.header-area .drop .seg + .t, .header-area .drop .langs + .t { margin-top: 14px; }
.header-area .drop:has(.langs) { width: 300px; }
.header-area .drop.end { left: auto; right: 0; }
/* sağdan sola dillerde (Arapça) menü butonun öbür kenarına hizalanır */
[dir="rtl"] .header-area .drop { left: auto; right: 0; }
[dir="rtl"] .header-area .drop.end { right: auto; left: 0; }
/* dil listesi: yerel adlar, iki sütun, bayraksız */
.header-area .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.header-area .langs a { height: 34px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--c-text-2); }
.header-area .langs a:hover { background: var(--c-soft); color: var(--c-primary); }
.header-area .langs a.on { background: var(--c-soft); color: var(--c-primary); font-weight: 700; }.header-area.inner .lang { height: 36px; padding: 0 12px; border: none; background: transparent; cursor: pointer; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c-text-2); }
.header-area.inner .lang:hover { background: var(--c-soft); color: var(--c-primary); }

/* ---------- alt bilgi ---------- */
.footer-area { max-width: var(--w); margin: 0 auto; width: 100%; padding: 64px 32px 40px; color: var(--c-primary); }
.footer-area .top { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap: 48px; padding-bottom: 56px; }
.footer-area .brand img { height: 22px; width: auto; display: block; margin-bottom: 20px; }
.footer-area .brand .texts { font-size: 14px; line-height: 23px; color: var(--c-muted); margin: 0 0 20px; max-width: 260px; }
.footer-area .badge { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-2); }
.footer-area .col { display: flex; flex-direction: column; gap: 12px; }
.footer-area .col .t { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 6px; }
.footer-area .col a { font-size: 14px; color: var(--c-text-2); }
.footer-area .col a:hover { color: var(--c-primary); }
.footer-area .bot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; flex-wrap: wrap; font-size: 12px; color: var(--c-faint); }
.footer-area .bot .links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-area .bot a { color: var(--c-faint); }

@media (max-width: 1024px) {
  .footer-area .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .header-area.home .ghost-btn { padding: 0 8px; }
  .header-area.inner .back span { display: none; }
  .footer-area { padding: 48px 16px 32px; }
  .footer-area .top { grid-template-columns: 1fr; gap: 32px; }
  .act-btn { width: auto; }
}

/* ============================================================
   Ana sayfa
   ============================================================ */
#page-home { display: flex; flex-direction: column; gap: 12px; }

/* hero */
#page-home .hero-area { padding: 56px 96px 40px; }
#page-home .hero-area .inner { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
#page-home .hero-area .badge { display: flex; align-items: center; gap: 9px; border: 1px solid var(--c-line-2); border-radius: 9999px; padding: 6px 15px 6px 7px; margin-bottom: 28px; background: rgba(255,255,255,0.9); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
#page-home .hero-area .badge .i { width: 24px; height: 24px; border-radius: 9999px; background: var(--c-sand); display: flex; align-items: center; justify-content: center; font-size: 13px; }
#page-home .hero-area .title { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.04em; margin: 0 0 22px; text-wrap: pretty; }
#page-home .hero-area .texts { font-size: 13px; line-height: 21px; color: var(--c-muted); margin: 0 0 36px; max-width: 640px; text-wrap: pretty; }
#page-home .search { width: 100%; max-width: 780px; display: flex; flex-direction: column; align-items: center; }
#page-home .search .field { position: relative; width: 100%; }
#page-home .search svg { display: block; width: 100%; height: auto; overflow: visible; }
/* geniş ekran: alan + aynı eğimde buton (svg.wide); dar ekran: yalnızca alan (svg.narrow) + alttaki buton */
#page-home .search svg.narrow, #page-home .search .go { display: none; }
#page-home .search .btn { fill: var(--c-primary); filter: drop-shadow(0 6px 10px rgba(14,59,56,0.25)); transition: fill 160ms ease; }
#page-home .search .label { font-family: var(--f-text); font-size: 17px; font-weight: 600; fill: #ffffff; text-anchor: middle; pointer-events: none; }
#page-home .search .go-arc { position: absolute; z-index: 2; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 14px; }
#page-home .search .go-arc:hover + svg .btn { fill: var(--c-primary-hover); }
#page-home .search .go-arc:focus-visible { outline: none; }
#page-home .search .go-arc:focus-visible + svg .btn { stroke: var(--c-lime); stroke-width: 3; vector-effect: non-scaling-stroke; }
#page-home .search .halo { fill: none; stroke: var(--c-lime); stroke-width: 9; stroke-linejoin: round; vector-effect: non-scaling-stroke; animation: rgHalo 2.6s ease-in-out infinite; }
#page-home .search .frame { fill: #ffffff; stroke: var(--c-lime); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
#page-home .search .lens { fill: none; stroke: var(--c-faint); stroke-width: 2; stroke-linecap: round; }
#page-home .search .typed { font-family: var(--f-text); font-size: 18px; text-anchor: middle; pointer-events: none; }
#page-home .search .typed.has { font-size: 21px; }
#page-home .search .typed .ph { fill: var(--c-faint); }
#page-home .search .typed .val { fill: var(--c-primary); }
#page-home .search .typed .caret { fill: var(--c-lime-dark); animation: rgBlink 1s step-end infinite; }
#page-home .search input { position: absolute; left: var(--fl); top: var(--ft); width: var(--fw); height: var(--fh); opacity: 0; border: none; font-size: 16px; cursor: text; }
#page-home .search .go { position: relative; z-index: 2; margin-top: 22px; height: 50px; padding: 0 22px; border-radius: 9px; border: none; background: var(--c-primary); color: #ffffff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(14,59,56,0.28); }
@media (max-width: 640px) {
  #page-home .search svg.wide, #page-home .search .go-arc { display: none; }
  #page-home .search svg.narrow { display: block; }
  #page-home .search .go { display: flex; }
  #page-home .search input { left: var(--ml); top: var(--mt); width: var(--mw); height: var(--mh); }
}
#page-home .search .go:hover { background: var(--c-primary-hover); }
#page-home .popular { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--c-muted-2); }
#page-home .popular a { height: 34px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--c-line-2); background: #ffffff; color: var(--c-text-2); display: inline-flex; align-items: center; }
#page-home .popular a:hover { border-color: var(--c-faint); }
#page-home .dropping { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); margin-top: 20px; }
#page-home .dropping .dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--c-live); }
#page-home .dropping strong { color: var(--c-primary); }
@keyframes rgHalo { 0%,100% { stroke-opacity: 0.05; } 50% { stroke-opacity: 0.22; } }
@keyframes rgBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #page-home .search .halo, #page-home .search .typed .caret { animation: none; } }

/* fiyat kartları */
#page-home .prices-area { padding: 72px 32px 32px; }
#page-home .prices-area .head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 48px; }
#page-home .prices-area .eyebrow { margin-bottom: 20px; }
#page-home .prices-area .txt { display: flex; flex-direction: column; align-items: center; }
#page-home .prices-area .texts { font-size: 13px; line-height: 21px; color: var(--c-muted); margin: 0 0 16px; max-width: 520px; }
#page-home .more { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
#page-home .prices-area .boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
#page-home .prices-area .box { background: #ffffff; border-radius: 14px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--c-line-2); }
#page-home .prices-area .box.pop { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(168,214,42,0.28); }
#page-home .prices-area .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#page-home .prices-area .tld { font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 27px; letter-spacing: -0.04em; white-space: nowrap; color: var(--c-primary); }
#page-home .prices-area .tld-net { color: #16a330; }
#page-home .prices-area .tag.soon { background: var(--c-soft); color: var(--c-muted); }
#page-home .prices-area .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 9999px; padding: 5px 11px; background: var(--c-lime); color: var(--c-primary); }
#page-home .prices-area .d { font-size: 13px; line-height: 19px; color: var(--c-muted); margin-bottom: 24px; min-height: 38px; }
#page-home .prices-area .from { font-size: 13px; color: var(--c-muted-2); margin: auto 0 6px; }
#page-home .prices-area .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
#page-home .prices-area .price .v { font-family: var(--f-display); font-weight: 700; font-size: 23px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#page-home .prices-area .price .per { font-size: 13px; color: var(--c-muted); }
#page-home .prices-area .rows { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid #eaeef3; }
#page-home .prices-area .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--c-muted-2); }
#page-home .prices-area .row span:last-child { font-weight: 600; color: var(--c-text-2); font-variant-numeric: tabular-nums; }

/* hot picks */
#page-home .hot-area { background: #ffffff; padding: 72px 32px 88px; }
#page-home .hot-area .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
#page-home .hot-area .head .eyebrow { margin-bottom: 14px; }
#page-home .hot-area .head .h2 { margin: 0; }
#page-home .hot-area .name a.t, #page-dropping .name a.t { display: block; color: inherit; text-decoration: none; }
#page-home .hot-area .name a.t:hover, #page-dropping .name a.t:hover { text-decoration: underline; }
#page-home .hot-area .tabs { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
#page-home .hot-area .tab { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 9999px; cursor: pointer; font-size: 13px; font-weight: 500; background: #ffffff; color: var(--c-text-2); border: 1px solid var(--c-line-2); }
#page-home .hot-area .tab .n { font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 2px 9px; background: #f3f4f6; color: var(--c-muted); }
#page-home .hot-area .tab.on { background: var(--c-lime); color: var(--c-primary); border-color: var(--c-lime); }
#page-home .hot-area .tab.on .n { background: rgba(14,59,56,0.12); color: var(--c-primary); }
#page-home .hot-area .cols { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1.1fr) minmax(0,0.8fr) minmax(0,1fr) 180px; gap: 16px; align-items: center; }
#page-home .hot-area .cols-head { padding: 0 12px 2px; }
#page-home .hot-area .item { padding: 20px 12px; border-bottom: 1px solid var(--c-line-2); }
#page-home .hot-area .item:hover { background: var(--c-sand); }
#page-home .hot-area .name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#page-home .hot-area .name .t { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
#page-home .hot-area .name .meta, #page-home .hot-area .price .note { font-size: 12px; color: var(--c-muted-2); }
#page-home .hot-area .left { font-size: 13px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
#page-home .hot-area .price { display: flex; flex-direction: column; gap: 2px; }
#page-home .hot-area .price .v { font-family: var(--f-display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
#page-home .hot-area .acts { display: flex; justify-content: flex-end; }
#page-home .hot-area .foot { padding: 20px 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--c-muted-2); }
#page-home .hot-area .foot a { font-weight: 600; color: var(--c-primary); }

/* backorder bantları */
#page-home .backorder-area { padding: 64px 32px 32px; }
#page-home .backorder-area .head { max-width: 820px; margin: 0 auto 64px; text-align: center; }
#page-home .backorder-area .h2 { margin-bottom: 20px; }
#page-home .backorder-area .head .texts { font-size: 14px; line-height: 23px; margin: 0 auto; max-width: 540px; opacity: 0.82; }
#page-home .bands { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; }
#page-home .band .in { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding: 22px 40px; min-height: 120px; }
#page-home .band.b1 { background: var(--c-primary-hover); color: #ffffff; clip-path: polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); }
#page-home .band.b2 { background: var(--c-sand); color: var(--c-primary); clip-path: polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); }
#page-home .band.b3 { background: var(--c-lime); color: var(--c-primary); }
#page-home .band.b2 .in { padding-left: 150px; }
#page-home .band.b3 .in { padding-left: 260px; }
#page-home .band .num { font-family: var(--f-display); font-weight: 500; font-size: 72px; line-height: 68px; letter-spacing: -0.055em; }
#page-home .band .txt { max-width: 260px; display: flex; flex-direction: column; gap: 6px; }
#page-home .band .t { font-size: 13px; font-weight: 600; }
#page-home .band .d { font-size: 12px; line-height: 19px; }
#page-home .band.b1 .d { color: rgba(255,255,255,0.66); }
#page-home .band.b2 .d { color: var(--c-muted); }
#page-home .band.b3 .d { color: #1C4F4A; }
#page-home .band .tag { margin-left: auto; margin-right: 80px; font-size: 12px; border: 1px solid rgba(14,59,56,0.45); border-radius: 6px; padding: 6px 14px; white-space: nowrap; }
#page-home .band.b1 .tag { border-color: rgba(255,255,255,0.4); }

/* iki kolonlu bölümler: transfer, destek, sss */
#page-home .grid { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 64px; align-items: start; }
#page-home .grid .h2 { margin-bottom: 18px; }
#page-home .grid .texts { font-size: 14px; line-height: 23px; color: var(--c-muted); margin: 0 0 26px; max-width: 280px; }
#page-home .transfer-area { padding: 72px 32px 88px; }
#page-home .transfer-area .acts { display: flex; gap: 18px; align-items: center; }
#page-home .transfer-area .dark-btn.lg { height: 44px; padding: 0 22px; font-size: 14px; font-weight: 500; }
#page-home .transfer-area .link { font-size: 14px; color: var(--c-muted); }
#page-home .steps { list-style: none; margin: 0; padding: 0; }
#page-home .steps li { display: grid; grid-template-columns: 44px minmax(0,240px) minmax(0,1fr); gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
#page-home .steps li:last-child { border-bottom: none; }
#page-home .steps .n { font-family: var(--f-display); font-size: 13px; color: var(--c-faint); }
#page-home .steps .t { font-size: 15px; font-weight: 500; }
#page-home .steps .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }

#page-home .support-area .grid { padding: 80px 32px 88px; }
#page-home .support-area .team { display: flex; gap: 8px; align-items: center; margin-bottom: 26px; }
#page-home .support-area .team span { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid #d5d9d5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--c-muted-2); }
#page-home .support-area .team em { font-style: normal; font-size: 13px; color: var(--c-faint); margin-left: 8px; }
#page-home .support-area .boxes { display: grid; grid-template-columns: 1fr 1fr; }
#page-home .support-area .box { padding: 28px 32px 28px 0; display: flex; flex-direction: column; }
#page-home .support-area .box:nth-child(even) { padding: 28px 0 28px 32px; border-left: 1px solid #D5D9D5; }
#page-home .support-area .box:nth-child(-n+2) { border-bottom: 1px solid #D5D9D5; }
#page-home .support-area .box i { font-size: 20px; }
#page-home .support-area .box .t { font-size: 15px; font-weight: 500; margin: 18px 0 6px; }
#page-home .support-area .box .d { font-size: 13px; line-height: 21px; color: var(--c-muted); max-width: 280px; }

/* karşılaştırma */
#page-home .compare-area { background: #ffffff; padding: 72px 32px 88px; }
#page-home .compare-area .head { text-align: center; margin-bottom: 44px; }
#page-home .compare-area .eyebrow { margin-bottom: 20px; }
#page-home .compare-area .table-wrap { overflow-x: auto; }
#page-home .compare-area table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
#page-home .compare-area th, #page-home .compare-area td { height: 58px; padding: 14px 16px; font-size: 13px; text-align: center; color: var(--c-muted-2); border-bottom: 1px solid var(--c-line); }
#page-home .compare-area thead th { height: 64px; font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--c-primary); border-bottom: none; }
#page-home .compare-area tbody th { text-align: left; padding-left: 0; font-weight: 400; color: var(--c-muted); width: 32%; }
#page-home .compare-area tbody tr:last-child > * { border-bottom: none; }
#page-home .compare-area .us { background: var(--c-sand); color: var(--c-primary); font-weight: 600; border-bottom-color: rgba(14,59,56,0.14); }
#page-home .compare-area thead .us { border-radius: 13px 16px 0 0; }
#page-home .compare-area tbody tr:last-child .us { border-radius: 0 0 16px 16px; }

/* yorumlar */
#page-home .quotes-area { padding: 64px 32px 32px; }
#page-home .quotes-area .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
#page-home .quotes-area .h2 { max-width: 520px; }
#page-home .quotes-area .scores { display: flex; gap: 40px; white-space: nowrap; }
#page-home .quotes-area .scores .v { font-family: var(--f-display); font-weight: 500; font-size: 23px; letter-spacing: -0.03em; }
#page-home .quotes-area .scores .d { font-size: 12px; color: rgba(255,255,255,0.45); }
#page-home .quotes-area .boxes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
#page-home .quotes-area .box { margin: 0; padding: 32px 44px; display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.14); }
#page-home .quotes-area .box:first-child { padding-left: 0; border-left: none; }
#page-home .quotes-area .box:last-child { padding-right: 0; }
#page-home .quotes-area blockquote { font-size: 15px; line-height: 25px; margin: 0 0 26px; }
#page-home .quotes-area figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: 13px; }
#page-home .quotes-area figcaption .t { font-weight: 500; }
#page-home .quotes-area figcaption .d { color: rgba(255,255,255,0.45); }
#page-home .quotes-area .note { font-size: 11px; color: rgba(255,255,255,0.32); margin-top: 20px; }

/* sss */
#page-home .faqs-area .grid { padding: 72px 32px 88px; }
#page-home .faqs-area .more { font-size: 13px; font-weight: 400; }
#page-home .faqs-area .item { border-bottom: 1px solid var(--c-line); }
#page-home .faqs-area .item:last-child { border-bottom: none; }
#page-home .faqs-area .item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 16px; font-weight: 500; color: var(--c-primary); }
#page-home .faqs-area .item button i { font-size: 18px; color: var(--c-faint); flex: none; transition: transform 160ms ease; }
#page-home .faqs-area .item.open button i { transform: rotate(45deg); }
#page-home .faqs-area .item .a { display: none; font-size: 14px; line-height: 24px; color: var(--c-muted); padding: 0 56px 26px 0; max-width: 720px; }
#page-home .faqs-area .item.open .a { display: block; }

@media (max-width: 1024px) {
  #page-home .hero-area { padding: 40px 24px 32px; }
  #page-home .grid { grid-template-columns: 1fr; gap: 32px; }
  #page-home .grid .texts { max-width: none; }
  #page-home .band .in, #page-home .band.b2 .in, #page-home .band.b3 .in { padding-left: 32px; gap: 20px; }
  #page-home .band .tag { margin-right: 32px; }
  #page-home .quotes-area .head { flex-direction: column; align-items: flex-start; }
  #page-home .quotes-area .scores { flex-wrap: wrap; gap: 16px 32px; white-space: normal; }
  #page-home .quotes-area .boxes { grid-template-columns: 1fr; }
  #page-home .quotes-area .box, #page-home .quotes-area .box:first-child, #page-home .quotes-area .box:last-child { padding: 24px 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.14); }
  #page-home .quotes-area .box:first-child { border-top: none; }
}
@media (max-width: 768px) {
  #page-home .prices-area, #page-home .hot-area, #page-home .compare-area, #page-home .transfer-area, #page-home .backorder-area, #page-home .quotes-area { padding-left: 16px; padding-right: 16px; }
  #page-home .support-area .grid, #page-home .faqs-area .grid { padding-left: 16px; padding-right: 16px; }
  #page-home .hot-area .cols { grid-template-columns: minmax(0,1fr) auto; row-gap: 10px; }
  #page-home .hot-area .cols-head { display: none; }
  #page-home .hot-area .acts { grid-column: 1 / -1; justify-content: flex-start; }
  #page-home .steps li { grid-template-columns: 36px minmax(0,1fr); }
  #page-home .steps .d { grid-column: 2; }
  #page-home .support-area .boxes { grid-template-columns: 1fr; }
  #page-home .support-area .box, #page-home .support-area .box:nth-child(even) { padding: 22px 0; border-left: none; border-bottom: 1px solid #D5D9D5; }
  #page-home .band .num { font-size: 52px; line-height: 50px; }
  #page-home .band .tag { margin: 0; }
  #page-home .faqs-area .item .a { padding-right: 0; }
}
@media (max-width: 560px) {
  /* SVG ölçeklendiği için yazı küçülür: dar ekranda büyüt */
  #page-home .search .typed { font-size: 30px; }
  #page-home .search .typed.has { font-size: 34px; }
  #page-home .hero-area .title br { display: none; }
}

/* ============================================================
   İç sayfalar: ortak liste/kabuk
   ============================================================ */
.page > .block { background: #ffffff; }
.page > .block.sand { background: var(--c-sand); }

/* ============================================================
   Arama sonuçları
   ============================================================ */
#page-search { display: flex; flex-direction: column; gap: 12px; }
#page-search .search-area { padding: 32px 32px 0; }
#page-search .bar { display: flex; gap: 10px; align-items: center; }
#page-search .bar .field { flex: 1; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border: 1px solid var(--c-line-2); border-radius: 9999px; }
#page-search .bar .field:focus-within { border-color: var(--c-primary); }
#page-search .bar .field i { font-size: 17px; color: var(--c-muted-2); }
#page-search .bar input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 15px; height: 100%; }
#page-search .bar button { height: 56px; padding: 0 30px; border-radius: 9999px; border: none; background: #0a0a0a; color: #ffffff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#page-search .bar button:hover { background: #2a3040; }
#page-search .results-area { padding: 20px 32px 88px; }
#page-search .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 52px; }
#page-search .card { border: 1px solid var(--c-line-2); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
#page-search .card .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: #f1ffd9; color: #496e2d; border-radius: 9999px; padding: 6px 13px; margin-bottom: 22px; }
#page-search .card.taken .tag { background: #f3f4f6; color: var(--c-text-2); }
#page-search .card .name { font-family: var(--f-display); font-weight: 700; font-size: 27px; line-height: 30px; letter-spacing: -0.04em; margin-bottom: 30px; word-break: break-all; }
#page-search .card .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-family: var(--f-display); font-weight: 700; font-size: 25px; letter-spacing: -0.04em; }
#page-search .card .price .per { font-family: var(--f-text); font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--c-muted); }
#page-search .card.taken .price .per { display: none; }
#page-search .card .note { font-size: 13px; color: var(--c-muted); margin: auto 0 26px; padding-top: 4px; }
#page-search .card .buy { width: 100%; height: 48px; border-radius: 9999px; background: #0a0a0a; color: #ffffff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
#page-search .card .buy:hover { background: #2a3040; color: #ffffff; }
#page-search .card .buy.line { background: #ffffff; color: var(--c-primary); border: 1px solid var(--c-input); }
#page-search .card .buy.line:hover { background: var(--c-primary); color: #ffffff; border-color: var(--c-primary); }
#page-search .card .why { width: 100%; border-top: 1px solid var(--c-line-2); margin-top: 26px; padding-top: 22px; }
#page-search .card .why .t { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
#page-search .card .why .line { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; line-height: 20px; color: var(--c-muted); }
#page-search .card .why .line i { font-size: 16px; color: var(--c-primary); flex: none; }
#page-search .more-list .head { padding-bottom: 18px; border-bottom: 1px solid var(--c-line-2); }
#page-search .more-list .head .t { font-size: 16px; font-weight: 600; }
#page-search .more-list .item { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,1fr) 200px; gap: 16px; align-items: center; padding: 20px 12px; border-bottom: 1px solid var(--c-line-2); }
#page-search .more-list .item:hover { background: var(--c-sand); }
#page-search .more-list .name { display: flex; align-items: center; gap: 14px; min-width: 0; }
#page-search .more-list .name .t { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
#page-search .more-list .state, #page-search .more-list .price { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--c-text-2); }
#page-search .more-list .price .v { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--c-primary); font-variant-numeric: tabular-nums; }
#page-search .more-list .note { font-size: 12px; color: var(--c-muted-2); }
#page-search .more-list .acts { display: flex; justify-content: flex-end; }
#page-search .empty.form-err { font-size: 14px; }
@media (max-width: 768px) {
  #page-search .search-area, #page-search .results-area { padding-left: 16px; padding-right: 16px; }
  #page-search .bar { flex-direction: column; align-items: stretch; }
  #page-search .cards { grid-template-columns: 1fr; }
  #page-search .more-list .item { grid-template-columns: minmax(0,1fr) auto; }
  #page-search .more-list .state { display: none; }
  #page-search .more-list .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================
   Fiyatlar
   ============================================================ */
#page-prices .list-area { padding: 40px 32px 88px; }
#page-prices .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; }
#page-prices .head .txt { max-width: 560px; }
#page-prices .head .eyebrow { margin-bottom: 16px; }
#page-prices .search-box { width: 320px; max-width: 100%; }
#page-prices .cols { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(4,minmax(0,1fr)) 110px; gap: 16px; align-items: center; }
#page-prices .cols-head { padding: 0 12px 10px; }
#page-prices .item { padding: 16px 12px; border-top: 1px solid var(--c-line-2); font-size: 13px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
#page-prices .tld { display: flex; align-items: center; gap: 10px; }
#page-prices .tld .t { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--c-primary); }
#page-prices .tld .tag { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-lime-soft); color: var(--c-lime-text); border-radius: 9999px; padding: 3px 9px; }
#page-prices .reg { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--c-primary); }
#page-prices .acts { display: flex; justify-content: flex-end; }
/* listed, not orderable yet */
#page-prices .acts .soon { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9999px; background: var(--c-soft); font-size: 11px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
#page-prices .foot { font-size: 12px; color: var(--c-muted-2); margin: 24px 0 0; }
/* how many are shown, the page size and the page links */
#page-prices .summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12px; color: var(--c-muted-2); }
#page-prices .per { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-muted); }
#page-prices .per select { height: 32px; padding: 0 10px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer; }
#page-prices .bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--c-line-2); flex-wrap: wrap; font-size: 12px; color: var(--c-muted-2); }
#page-prices .pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#page-prices .pages a { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--c-input); background: #ffffff; color: var(--c-primary); font-variant-numeric: tabular-nums; }
#page-prices .pages a:hover { border-color: var(--c-primary); }
#page-prices .pages a.on { border-color: var(--c-primary); background: var(--c-primary); color: #ffffff; }
#page-prices .pages .gap { color: var(--c-muted-2); padding: 0 2px; }
@media (max-width: 768px) {
  #page-prices .list-area { padding: 28px 16px 56px; }
  #page-prices .h1 { font-size: 32px; line-height: 36px; }
  #page-prices .cols { grid-template-columns: minmax(0,1fr) repeat(2,minmax(0,1fr)); row-gap: 6px; }
  #page-prices .cols-head span:nth-child(n+4), #page-prices .item > :nth-child(n+4) { display: none; }
}

/* ============================================================
   WHOIS
   ============================================================ */
#page-whois .whois-area { padding: 40px 32px 88px; max-width: 900px; }
#page-whois .eyebrow { margin-bottom: 16px; }
#page-whois .form { display: flex; gap: 10px; margin: 24px 0 32px; }
#page-whois .form .search-box { flex: 1; height: 48px; }
#page-whois .result { display: flex; flex-direction: column; gap: 14px; }
#page-whois .result .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#page-whois .result .name { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; word-break: break-all; }
#page-whois .result .acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* kutular */
#page-whois .card { padding: 22px 24px; border: 1px solid var(--c-line-2); border-radius: 18px; background: #ffffff; }
#page-whois .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#page-whois .card-head .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin: 0; }
#page-whois .card-head .src { margin-inline-start: auto; font-size: 11px; color: var(--c-muted-2); }
#page-whois .tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 9999px; background: var(--c-soft); margin-bottom: 18px; }
#page-whois .tabs button { height: 30px; padding: 0 14px; border: none; border-radius: 9999px; background: transparent; font-size: 12px; font-weight: 600; color: var(--c-muted); cursor: pointer; }
#page-whois .tabs button.on { background: #ffffff; color: var(--c-primary); box-shadow: 0 1px 2px rgba(14, 59, 56, 0.08); }
/* özet alanları: iki sütun, durum kodları ve nameserver'lar tam genişlik */
#page-whois .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; margin: 0; }
#page-whois .fields .f { min-width: 0; }
#page-whois .fields .f.wide { grid-column: 1 / -1; }
/* büyük harfe çevrilmez: Türkçede "Registrar" → "REGİSTRAR" olurdu */
#page-whois .fields dt { font-size: 12px; font-weight: 500; color: var(--c-muted); margin-bottom: 4px; }
#page-whois .fields dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
#page-whois .fields dd a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
#page-whois .fields .muted { font-size: 12px; font-weight: 500; color: var(--c-muted-2); }
#page-whois .fields .none { font-weight: 500; font-style: italic; color: var(--c-muted-2); }
#page-whois .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-inline-start: 6px; border-radius: 9999px; background: var(--c-lime-soft); color: var(--c-lime-text); font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
#page-whois .tag.warn { background: #fff1e0; color: #a14b00; }
#page-whois .tag.red { background: #fde8e8; color: var(--c-red); }
#page-whois .codes { display: flex; flex-wrap: wrap; gap: 6px; }
#page-whois .code { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--c-line-2); border-radius: 9px; font-size: 12px; }
#page-whois .code b { font-weight: 600; }
#page-whois .code code, #page-whois code.ns { font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--c-muted); }
#page-whois code.ns { padding: 5px 10px; border: 1px solid var(--c-line-2); border-radius: 9px; color: var(--c-text); }
#page-whois .raw { margin: 0; padding: 18px; border-radius: 12px; background: var(--c-soft); font-family: var(--f-mono); font-size: 12px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* yaşam döngüsü: dört adım, geçerli olan vurgulu */
#page-whois .life { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
#page-whois .life li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-top: 3px solid var(--c-line-2); border-radius: 4px 4px 10px 10px; background: var(--c-soft); }
#page-whois .life .t { font-size: 13px; font-weight: 600; color: var(--c-muted); }
#page-whois .life .d { font-size: 11px; color: var(--c-muted-2); }
#page-whois .life li.past { border-top-color: #9fb8b5; }
#page-whois .life li.on { border-top-color: var(--c-primary); background: var(--c-lime-soft); }
#page-whois .life li.on .t { color: var(--c-primary); }
/* whoistool.net bağlantısı: logo ile, yeni sekmede */
#page-whois .credit { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--c-line-2); border-radius: 9999px; background: #ffffff; transition: border-color 160ms ease, background 160ms ease; }
#page-whois .credit:hover { border-color: #05a9c7; background: #f2fbfd; }
#page-whois .credit .t { font-size: 12px; font-weight: 600; color: var(--c-muted); }
#page-whois .credit img { display: block; height: 14px; width: auto; }
#page-whois .credit i { font-size: 15px; color: #05a9c7; }
#page-whois .note { font-size: 12px; color: var(--c-muted-2); margin: 4px 0 0; }
@media (max-width: 768px) {
  #page-whois .whois-area { padding: 28px 16px 56px; }
  #page-whois .h1 { font-size: 30px; line-height: 34px; }
  #page-whois .form { flex-direction: column; }
  /* alt alta: flex: 1 kutuyu yüksekliksiz bırakıyordu */
  #page-whois .form .search-box { flex: none; }
  #page-whois .form .dark-btn { justify-content: center; }
  #page-whois .card { padding: 18px 16px; }
  #page-whois .card-head .src { margin-inline-start: 0; width: 100%; }
  #page-whois .fields { grid-template-columns: 1fr; }
  #page-whois .life { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   404
   ============================================================ */
#page-404 { flex: 1; display: flex; }
#page-404 .notfound-area { padding: 72px 32px 88px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
#page-404 .code { font-family: var(--f-display); font-weight: 700; font-size: 132px; line-height: 1; letter-spacing: -0.06em; color: var(--c-primary); margin-bottom: 20px; }
#page-404 .code span { color: var(--c-lime); }
#page-404 .eyebrow { margin-bottom: 16px; }
#page-404 .lead { max-width: 520px; font-size: 15px; line-height: 25px; }
#page-404 .form { display: flex; gap: 10px; width: 100%; max-width: 560px; margin: 28px 0 24px; }
#page-404 .form .search-box { flex: 1; height: 48px; }
#page-404 .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 768px) {
  #page-404 .notfound-area { padding: 48px 16px 56px; }
  #page-404 .code { font-size: 96px; }
  #page-404 .h1 { font-size: 30px; line-height: 34px; }
  #page-404 .form { flex-direction: column; }
  #page-404 .form .search-box { flex: none; }
  #page-404 .form .dark-btn { justify-content: center; }
}

/* ============================================================
   Transfer
   ============================================================ */
#page-transfer { display: flex; flex-direction: column; gap: 12px; }
#page-transfer .transfer-area { padding: 40px 32px 72px; }
#page-transfer .head { max-width: 640px; margin-bottom: 36px; }
#page-transfer .head .eyebrow { margin-bottom: 16px; }
#page-transfer .stepper { list-style: none; margin: 0 0 32px; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
#page-transfer .stepper li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--c-muted-2); }
#page-transfer .stepper .n { width: 26px; height: 26px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--c-sand); color: var(--c-muted-2); }
#page-transfer .stepper li.on, #page-transfer .stepper li.done { color: var(--c-primary); }
#page-transfer .stepper li.on .n { background: var(--c-primary); color: #ffffff; }
#page-transfer .stepper li.done .n { background: var(--c-lime); color: var(--c-primary); }
#page-transfer .step1 { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
#page-transfer .step1 .main { flex: 1 1 520px; min-width: 0; }
#page-transfer .label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
#page-transfer .label span { color: var(--c-muted-2); font-weight: 400; }
#page-transfer textarea { width: 100%; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--c-input); font-size: 15px; line-height: 26px; resize: vertical; }
#page-transfer textarea:focus { border-color: var(--c-primary); }
#page-transfer .step1 .acts { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
#page-transfer .side { flex: 1 1 320px; max-width: 400px; background: var(--c-sand); border-radius: 18px; padding: 26px; }
#page-transfer .side .t { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
#page-transfer .side ul { list-style: none; margin: 0; padding: 0; }
#page-transfer .side li { display: flex; gap: 10px; padding: 10px 0; font-size: 13px; line-height: 20px; color: var(--c-muted); }
#page-transfer .side li i { font-size: 16px; color: var(--c-primary); flex: none; }
#page-transfer .step2 .item { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 180px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--c-line-2); }
#page-transfer .step2 .name .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; overflow-wrap: anywhere; }
#page-transfer .step2 .st { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-muted); }
#page-transfer .step2 .dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--c-warn); }
#page-transfer .step2 .ok .dot, #page-transfer .step2 .free .dot { background: var(--c-lime); }
#page-transfer .step2 .fix { font-size: 12px; line-height: 18px; color: var(--c-muted); }
#page-transfer .step2 .acts { display: flex; justify-content: flex-end; }
#page-transfer .step2 .bot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; flex-wrap: wrap; }
#page-transfer .step2 .sum { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
#page-transfer .step2 .note { font-size: 12px; line-height: 19px; color: var(--c-muted-2); margin: 18px 0 0; max-width: 640px; }
#page-transfer .how-area { padding: 64px 32px 72px; }
#page-transfer .how-area .h2 { margin-bottom: 18px; }
#page-transfer .steps { list-style: none; margin: 0; padding: 0; }
#page-transfer .steps li { display: grid; grid-template-columns: 44px minmax(0,240px) minmax(0,1fr); gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid #D5D9D5; }
#page-transfer .steps li:last-child { border-bottom: none; }
#page-transfer .steps .n { font-family: var(--f-display); font-size: 13px; color: var(--c-muted-2); }
#page-transfer .steps .t { font-size: 15px; font-weight: 500; }
#page-transfer .steps .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }
@media (max-width: 768px) {
  #page-transfer .transfer-area, #page-transfer .how-area { padding: 28px 16px 48px; }
  #page-transfer .h1 { font-size: 30px; line-height: 34px; }
  #page-transfer .step2 .item { grid-template-columns: 1fr; gap: 10px; }
  #page-transfer .step2 .acts { justify-content: flex-start; }
  #page-transfer .steps li { grid-template-columns: 36px minmax(0,1fr); }
  #page-transfer .steps .d { grid-column: 2; }
}

/* ============================================================
   Düşen domainler
   ============================================================ */
#page-dropping .list-area { padding: 32px 32px 88px; }
#page-dropping .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
#page-dropping .head .eyebrow { margin-bottom: 14px; }
#page-dropping .h1 { font-size: 36px; line-height: 40px; margin: 0; }
#page-dropping .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#page-dropping .search-box.sm { height: 42px; width: 260px; padding: 0 16px; }
#page-dropping .search-box.sm input { font-size: 13px; }
#page-dropping .seg { display: flex; gap: 4px; background: var(--c-sand); border-radius: 9999px; padding: 4px; }
/* sıralama: radyo düğmeleri, seçili olan beyaz */
#page-dropping .seg label { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
#page-dropping .seg label.on, #page-dropping .seg label:has(input:checked) { background: #ffffff; color: var(--c-primary); }
#page-dropping .seg input { position: absolute; opacity: 0; pointer-events: none; }
#page-dropping .seg label:has(input:focus-visible) { outline: 2px solid var(--c-lime); outline-offset: 1px; }
#page-dropping .layout { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
#page-dropping .filters { flex: 0 0 220px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 24px; }
#page-dropping .filters .t { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 12px; }
#page-dropping .filters .t.row { display: flex; justify-content: space-between; gap: 12px; }
#page-dropping .filters .t.row span:last-child { color: var(--c-primary); }
#page-dropping .check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; cursor: pointer; }
#page-dropping .check input { position: absolute; opacity: 0; pointer-events: none; }
#page-dropping .check .box { width: 18px; height: 18px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--c-faint); }
#page-dropping .check .box i { font-size: 13px; color: #ffffff; opacity: 0; }
#page-dropping .check input:checked + .box { background: var(--c-primary); border-color: var(--c-primary); }
#page-dropping .check input:checked + .box i { opacity: 1; }
#page-dropping .check input:focus-visible + .box { outline: 2px solid var(--c-lime); outline-offset: 2px; }
#page-dropping .check .n { margin-left: auto; font-size: 11px; color: var(--c-muted-2); }
#page-dropping .check.radio .box { border-radius: 9999px; }
#page-dropping input[type=range] { width: 100%; accent-color: var(--c-primary); margin-bottom: 6px; }
#page-dropping .link { align-self: flex-start; border: none; background: transparent; padding: 0; font-size: 12px; font-weight: 600; color: var(--c-muted); cursor: pointer; text-decoration: underline; }
#page-dropping .main { flex: 1 1 640px; min-width: 0; }
#page-dropping .cols { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,0.7fr) minmax(0,0.9fr) 164px; gap: 16px; align-items: center; }
#page-dropping .cols-head { padding: 0 0 2px; }
/* sonuç sayısı ve sayfa başına satır */
#page-dropping .summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12px; color: var(--c-muted-2); }
#page-dropping .per { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-muted); }
#page-dropping .per select { height: 32px; padding: 0 10px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer; }
#page-dropping .item { padding: 16px 0; border-bottom: 1px solid var(--c-line-2); }
#page-dropping .name .t { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 3px; overflow-wrap: anywhere; }
#page-dropping .name .meta, #page-dropping .price .note { font-size: 12px; color: var(--c-muted-2); }
#page-dropping .chip { height: 26px; padding: 0 11px; font-size: 11px; }
#page-dropping .chip.dark { background: var(--c-primary); color: #ffffff; }
#page-dropping .left { font-size: 13px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
#page-dropping .price .v { font-family: var(--f-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
#page-dropping .act-btn { width: 164px; height: 40px; font-size: 12px; border-color: var(--c-input); }
#page-dropping .bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; font-size: 12px; color: var(--c-muted-2); }
#page-dropping .pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#page-dropping .pages a { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--c-input); background: #ffffff; color: var(--c-primary); font-variant-numeric: tabular-nums; }
#page-dropping .pages a:hover { border-color: var(--c-primary); }
#page-dropping .pages a.on { border-color: var(--c-primary); background: var(--c-primary); color: #ffffff; }
#page-dropping .pages .gap { color: var(--c-muted-2); padding: 0 2px; }
@media (max-width: 1024px) {
  #page-dropping .filters { position: static; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  #page-dropping .filters .group { min-width: 180px; }
}
@media (max-width: 768px) {
  #page-dropping .list-area { padding: 24px 16px 56px; }
  #page-dropping .search-box.sm { width: 100%; }
  #page-dropping .cols { grid-template-columns: minmax(0,1fr) auto; row-gap: 8px; }
  #page-dropping .cols-head { display: none; }
  #page-dropping .act-btn { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   İçerik sayfaları için ortak parçalar (backorder, artırma,
   hakkımızda, iletişim, yardım, yasal, blog): global çünkü
   birden çok sayfada aynı.
   ============================================================ */
.line-btn.lg { height: 48px; padding: 0 24px; font-size: 13px; }
.lime-btn { height: 48px; padding: 0 24px; border-radius: 9999px; border: none; background: var(--c-lime); color: var(--c-primary); font-size: 13px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.lime-btn:hover { background: #b9e33f; color: var(--c-primary); }
.page .cta-area { padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.page .cta-area .txt { max-width: 560px; }
.page .cta-area .h2 { margin-bottom: 10px; }
.page .cta-area p { margin: 0; font-size: 14px; line-height: 23px; color: var(--c-muted); }
.page .cta-area.dark p { color: rgba(255,255,255,0.66); }
.page .cta-area .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.page .block.dark { background: var(--c-primary); }
@media (max-width: 768px) {
  .page .cta-area { padding: 32px 20px; }
  .h1 { font-size: 30px; line-height: 34px; }
  .h2 { font-size: 24px; line-height: 28px; }
}

/* ============================================================
   Backorder nasıl çalışır
   ============================================================ */
#page-backorder { display: flex; flex-direction: column; gap: 12px; }
#page-backorder .hero-area { padding: 48px 32px 64px; }
#page-backorder .hero-area .eyebrow { margin-bottom: 16px; }
#page-backorder .hero-area .h1 { font-size: 48px; line-height: 52px; max-width: 720px; }
#page-backorder .hero-area .lead { max-width: 640px; font-size: 15px; line-height: 25px; }
#page-backorder .acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 56px; }
#page-backorder .boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#page-backorder .box { border: 1px solid var(--c-line-2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
#page-backorder .box .n { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--c-lime-dark); margin-bottom: 18px; }
#page-backorder .box .t { font-size: 16px; font-weight: 600; }
#page-backorder .box .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }
#page-backorder .phases-area, #page-backorder .fees-area { padding: 56px 32px; }
#page-backorder .head { max-width: 560px; margin-bottom: 32px; }
#page-backorder .head .h2 { margin-bottom: 10px; }
#page-backorder .items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
#page-backorder .item { background: #ffffff; border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
#page-backorder .item .when { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 10px; }
#page-backorder .item .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
#page-backorder .item .d { font-size: 12px; line-height: 19px; color: var(--c-muted); }
#page-backorder .item.lime { background: var(--c-lime); }
#page-backorder .item.lime .when, #page-backorder .item.lime .d { color: #1C4F4A; }
#page-backorder .item.dark { background: var(--c-primary); color: #ffffff; }
#page-backorder .item.dark .when, #page-backorder .item.dark .d { color: rgba(255,255,255,0.66); }
#page-backorder .rows { margin: 0; max-width: 820px; }
#page-backorder .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--c-line-2); }
#page-backorder .row:last-child { border-bottom: none; }
#page-backorder .row dt { display: flex; flex-direction: column; gap: 4px; }
#page-backorder .row .t { font-size: 15px; font-weight: 500; }
#page-backorder .row .d { font-size: 13px; color: var(--c-muted); }
#page-backorder .row dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  #page-backorder .boxes { grid-template-columns: 1fr 1fr; }
  #page-backorder .items { grid-template-columns: 1fr 1fr; }
  #page-backorder .item.dark { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  #page-backorder .hero-area { padding: 28px 16px 40px; }
  #page-backorder .hero-area .h1 { font-size: 34px; line-height: 38px; }
  #page-backorder .phases-area, #page-backorder .fees-area { padding: 40px 16px; }
  #page-backorder .boxes, #page-backorder .items { grid-template-columns: 1fr; }
  #page-backorder .row dd { font-size: 18px; }
}

/* ============================================================
   Açık artırma
   ============================================================ */
#page-auction { display: flex; flex-direction: column; gap: 12px; }
#page-auction .hero-area { padding: 48px 32px 24px; }
#page-auction .hero-area .eyebrow { margin-bottom: 16px; }
#page-auction .hero-area .h1 { font-size: 48px; line-height: 52px; max-width: 760px; }
#page-auction .hero-area .lead { max-width: 680px; font-size: 15px; line-height: 25px; }
#page-auction .rules-area { padding: 32px 32px 56px; }
#page-auction .rules-area .h2 { margin-bottom: 24px; }
#page-auction .boxes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
#page-auction .box { border: 1px solid var(--c-line-2); border-radius: 16px; padding: 24px; }
#page-auction .box i { font-size: 20px; color: var(--c-primary); }
#page-auction .box .t { font-size: 15px; font-weight: 600; margin: 16px 0 6px; }
#page-auction .box .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }
#page-auction .list-area { padding: 48px 32px 56px; }
#page-auction .list-area .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
#page-auction .list-area .eyebrow { margin-bottom: 12px; }
#page-auction .cols { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,0.7fr) minmax(0,0.7fr) minmax(0,0.8fr) 164px; gap: 16px; align-items: center; }
#page-auction .cols-head { padding-bottom: 4px; }
#page-auction .item { padding: 16px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; color: var(--c-text-2); }
#page-auction .name .t { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--c-primary); margin-bottom: 3px; overflow-wrap: anywhere; }
#page-auction .name .meta { font-size: 12px; color: var(--c-muted-2); }
#page-auction .left { font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  #page-auction .boxes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  #page-auction .hero-area { padding: 28px 16px 16px; }
  #page-auction .hero-area .h1 { font-size: 34px; line-height: 38px; }
  #page-auction .rules-area, #page-auction .list-area { padding: 28px 16px 40px; }
  #page-auction .boxes { grid-template-columns: 1fr; }
  #page-auction .cols { grid-template-columns: minmax(0,1fr) auto; row-gap: 8px; }
  #page-auction .cols-head, #page-auction .item .n { display: none; }
  #page-auction .act-btn { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   İletişim formu (İletişim ve Yardım sayfalarında): global
   ============================================================ */
.contact-form .label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.contact-form .label span { font-weight: 400; color: var(--c-muted-2); }
.contact-form .topics { border: none; margin: 0 0 18px; padding: 0; }
.contact-form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-form .topic input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form .topic span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; font-size: 12px; font-weight: 600; color: var(--c-text-2); cursor: pointer; }
.contact-form .topic input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; }
.contact-form .topic input:focus-visible + span { outline: 2px solid var(--c-lime); outline-offset: 2px; }
.contact-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form .field { margin-bottom: 14px; }
.contact-form input:not([type=radio]), .contact-form textarea { width: 100%; height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--c-input); background: #ffffff; font-size: 14px; }
.contact-form textarea { height: auto; padding: 12px 16px; line-height: 22px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--c-primary); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .note { display: flex; gap: 8px; font-size: 12px; line-height: 19px; color: var(--c-warn); margin: 0 0 14px; }
.contact-form .note i { font-size: 15px; flex: none; }
.contact-form .form-err { margin: 0 0 14px; }
.contact-form .bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contact-form .hint { font-size: 12px; color: var(--c-muted-2); }
.contact-form button[disabled] { opacity: 0.6; cursor: default; }
.contact-form .sent { padding: 40px 0; text-align: center; outline: none; }
.contact-form .sent i { font-size: 40px; color: var(--c-lime-dark); }
.contact-form .sent .t { font-family: var(--f-display); font-weight: 700; font-size: 22px; margin: 12px 0 6px; }
.contact-form .sent .d { font-size: 14px; color: var(--c-muted); }
.contact-form.dark .label { color: #ffffff; }
.contact-form.dark .label span, .contact-form.dark .hint { color: rgba(255,255,255,0.55); }
.contact-form.dark .topic span { background: transparent; border-color: rgba(255,255,255,0.28); color: #ffffff; }
.contact-form.dark .topic input:checked + span { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-primary); }
.contact-form.dark input:not([type=radio]), .contact-form.dark textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #ffffff; }
.contact-form.dark input:focus, .contact-form.dark textarea:focus { border-color: var(--c-lime); }
.contact-form.dark ::placeholder { color: rgba(255,255,255,0.4); }
.contact-form.dark .form-err { color: #ffb4b4; }
.contact-form.dark .note { color: #ffd08a; }
.contact-form.dark .sent .t { color: #ffffff; }
.contact-form.dark .sent .d { color: rgba(255,255,255,0.7); }
.contact-form.dark .sent strong { color: var(--c-lime); }
@media (max-width: 560px) {
  .contact-form .two { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Hakkımızda
   ============================================================ */
#page-about { display: flex; flex-direction: column; gap: 12px; }
#page-about .hero-area { padding: 56px 32px 56px; }
#page-about .hero-area .eyebrow { margin-bottom: 18px; }
#page-about .hero-area .h1 { font-size: 48px; line-height: 52px; max-width: 840px; margin-bottom: 20px; }
#page-about .hero-area .lead { font-size: 16px; line-height: 27px; max-width: 640px; }
#page-about .stats-area { padding: 40px 32px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
#page-about .stats-area .box { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.16); }
#page-about .stats-area .box:first-child { padding-left: 0; border-left: none; }
#page-about .stats-area .v { font-family: var(--f-display); font-weight: 500; font-size: 32px; line-height: 38px; letter-spacing: -0.04em; color: var(--c-lime); margin-bottom: 6px; }
#page-about .stats-area .d { font-size: 13px; line-height: 20px; color: rgba(255,255,255,0.66); }
#page-about .values-area, #page-about .roadmap-area { padding: 56px 32px; }
#page-about .values-area .h2 { margin-bottom: 28px; }
#page-about .values-area .boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
#page-about .values-area .box { border-top: 1px solid var(--c-line-2); padding-top: 20px; }
#page-about .values-area .n { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--c-lime-dark); }
#page-about .values-area .t { font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
#page-about .values-area .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }
#page-about .roadmap-area .head { margin-bottom: 28px; }
#page-about .roadmap-area .h2 { margin-bottom: 8px; }
#page-about .roadmap-area .boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-about .roadmap-area .box { border-radius: 16px; padding: 28px; min-height: 180px; display: flex; flex-direction: column; }
#page-about .roadmap-area .box.dark { background: var(--c-primary); color: #ffffff; }
#page-about .roadmap-area .box.lime { background: var(--c-lime); color: var(--c-primary); }
#page-about .roadmap-area .when { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
#page-about .roadmap-area .t { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; margin: auto 0 8px; padding-top: 32px; }
#page-about .roadmap-area .d { font-size: 13px; line-height: 21px; opacity: 0.8; max-width: 440px; }
#page-about .compliance-area { padding: 48px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
#page-about .compliance-area .txt { max-width: 620px; }
#page-about .compliance-area .eyebrow { margin-bottom: 14px; }
#page-about .compliance-area .h2 { margin-bottom: 12px; }
#page-about .compliance-area p { margin: 0; font-size: 14px; line-height: 23px; color: var(--c-muted); }
#page-about .compliance-area .acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1024px) {
  #page-about .stats-area, #page-about .values-area .boxes { grid-template-columns: 1fr 1fr; }
  #page-about .stats-area .box:nth-child(3) { padding-left: 0; border-left: none; }
}
@media (max-width: 768px) {
  #page-about .hero-area { padding: 28px 16px 32px; }
  #page-about .hero-area .h1 { font-size: 32px; line-height: 36px; }
  #page-about .stats-area, #page-about .values-area, #page-about .roadmap-area, #page-about .compliance-area { padding: 32px 16px; }
  #page-about .stats-area .v { font-size: 26px; line-height: 32px; }
  #page-about .values-area .boxes, #page-about .roadmap-area .boxes { grid-template-columns: 1fr; }
}

/* ============================================================
   İletişim
   ============================================================ */
#page-contact { display: flex; flex-direction: column; gap: 12px; }
#page-contact .contact-area { padding: 48px 32px 56px; display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 64px; align-items: start; }
#page-contact .left .eyebrow { margin-bottom: 16px; }
#page-contact .left .lead { max-width: 440px; margin-bottom: 32px; }
#page-contact .items { list-style: none; margin: 0; padding: 0; }
#page-contact .item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--c-line-2); }
#page-contact .item > i { width: 40px; height: 40px; border-radius: 9999px; background: var(--c-sand); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
#page-contact .item .txt { flex: 1; min-width: 0; }
#page-contact .item .t { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
#page-contact .item .d { font-size: 13px; color: var(--c-muted); overflow-wrap: anywhere; }
#page-contact .item a.d:hover { color: var(--c-primary); }
#page-contact .right { background: var(--c-soft); border-radius: 18px; padding: 28px; }
#page-contact .cards-area { padding: 0 32px 56px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
#page-contact .cards-area .box { border: 1px solid var(--c-line-2); border-radius: 16px; padding: 24px; display: block; }
#page-contact .cards-area a.box:hover { border-color: var(--c-faint); }
#page-contact .cards-area i { font-size: 20px; }
#page-contact .cards-area .t { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
#page-contact .cards-area .d { font-size: 13px; line-height: 21px; color: var(--c-muted); }
@media (max-width: 1024px) {
  #page-contact .contact-area { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  #page-contact .contact-area { padding: 28px 16px 40px; }
  #page-contact .right { padding: 20px 16px; }
  #page-contact .cards-area { padding: 0 16px 40px; grid-template-columns: 1fr; }
  #page-contact .item { flex-wrap: wrap; }
}

/* ============================================================
   Yardım
   ============================================================ */
#page-help { display: flex; flex-direction: column; gap: 12px; }
#page-help .hero-area { padding: 56px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; }
#page-help .hero-area .eyebrow { margin-bottom: 16px; }
#page-help .hero-area .h1 { margin-bottom: 24px; }
#page-help .hero-area .search-box { width: 100%; max-width: 560px; height: 52px; }
#page-help .faqs-area { padding: 48px 32px 56px; display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 56px; align-items: start; }
#page-help .nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
#page-help .nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--c-text-2); }
#page-help .nav a:hover { background: var(--c-soft); color: var(--c-primary); }
#page-help .nav a i { font-size: 16px; }
#page-help .nav .n { margin-left: auto; font-size: 11px; color: var(--c-muted-2); }
#page-help .group { margin-bottom: 40px; scroll-margin-top: 24px; }
#page-help .group .t { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; }
#page-help .item { border-bottom: 1px solid var(--c-line); }
#page-help .item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; background: transparent; border: none; cursor: pointer; text-align: left; font-size: 15px; font-weight: 500; color: var(--c-primary); }
#page-help .item button i { font-size: 18px; color: var(--c-faint); flex: none; transition: transform 160ms ease; }
#page-help .item.open button i { transform: rotate(45deg); }
#page-help .item .a { display: none; font-size: 14px; line-height: 24px; color: var(--c-muted); padding: 0 40px 20px 0; }
#page-help .item.open .a { display: block; }
#page-help .item .a a { color: var(--c-primary); font-weight: 600; text-decoration: underline; }
#page-help .contact-area { padding: 56px 32px; display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 56px; align-items: start; scroll-margin-top: 24px; }
#page-help .contact-area .h2 { margin-bottom: 12px; }
#page-help .contact-area p { margin: 0 0 24px; font-size: 14px; line-height: 23px; color: rgba(255,255,255,0.66); }
#page-help .contact-area .line-btn { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.3); }
#page-help .contact-area .line-btn:hover { background: #ffffff; color: var(--c-primary); }
#page-help .contact-area .mail { display: block; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,0.66); }
@media (max-width: 1024px) {
  #page-help .faqs-area { grid-template-columns: 1fr; gap: 24px; }
  #page-help .nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #page-help .nav a { border: 1px solid var(--c-line-2); border-radius: 9999px; padding: 8px 14px; }
  #page-help .nav .n { display: none; }
  #page-help .contact-area { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  #page-help .hero-area { padding: 36px 16px; }
  #page-help .faqs-area, #page-help .contact-area { padding: 32px 16px; }
  #page-help .item .a { padding-right: 0; }
}

/* ============================================================
   Yasal
   ============================================================ */
#page-legal .legal-area { padding: 48px 32px 72px; display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 64px; align-items: start; }
#page-legal .nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
#page-legal .nav .label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 10px; }
#page-legal .nav a { padding: 10px 12px; border-radius: 10px; font-size: 13px; color: var(--c-text-2); }
#page-legal .nav a:hover { background: var(--c-soft); }
#page-legal .nav a.on { background: var(--c-sand); color: var(--c-primary); font-weight: 600; }
#page-legal .nav .mail { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--c-muted); }
#page-legal .doc { max-width: 760px; min-width: 0; }
#page-legal .doc .eyebrow { margin-bottom: 16px; }
#page-legal .updated { font-size: 12px; color: var(--c-muted-2); margin-bottom: 20px; }
#page-legal .doc > .lead { font-size: 15px; line-height: 25px; padding-bottom: 28px; border-bottom: 1px solid var(--c-line-2); }
#page-legal .text { font-size: 14px; line-height: 24px; color: var(--c-text-2); }
#page-legal .text h2 { font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--c-primary); margin: 32px 0 10px; }
#page-legal .text p { margin: 0 0 12px; }
#page-legal .text ul { margin: 0 0 12px; padding-left: 20px; }
#page-legal .text li { margin-bottom: 6px; }
#page-legal .text a { color: var(--c-primary); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
#page-legal .text .src { margin-top: 28px; font-size: 13px; color: var(--c-muted); }
@media (max-width: 1024px) {
  #page-legal .legal-area { grid-template-columns: 1fr; gap: 28px; }
  #page-legal .nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #page-legal .nav .label { width: 100%; margin: 0; }
  #page-legal .nav a { border: 1px solid var(--c-line-2); border-radius: 9999px; padding: 8px 14px; }
  #page-legal .nav .mail { display: none; }
}
@media (max-width: 768px) {
  #page-legal .legal-area { padding: 28px 16px 48px; }
}

/* ============================================================
   Blog ve blog yazısı
   ============================================================ */
#page-blog, #page-post { display: flex; flex-direction: column; gap: 12px; }
#page-blog .meta, #page-post .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--c-muted-2); }
#page-blog .meta .cat, #page-post .meta .cat { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-lime-text); background: var(--c-lime-soft); border-radius: 9999px; padding: 4px 10px; }
#page-blog .cover, #page-post .cover { background: var(--cv-bg, var(--c-primary)); border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
#page-blog .cover::after, #page-post .cover::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 9999px; background: var(--cv-dot, var(--c-lime)); opacity: 0.18; }
#page-blog .mark, #page-post .mark { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.05em; color: var(--cv-mark, var(--c-lime)); position: relative; z-index: 1; padding: 0 24px; text-align: center; overflow-wrap: anywhere; }
/* kapak arka planları (panel > Blog > Kapak; adlar BlogPost::COVERS, panelde admin.css'te aynısı) */
.cover.bg-forest { --cv-bg: #0E3B38; --cv-mark: #A8D62A; --cv-dot: #A8D62A; }
.cover.bg-moss { --cv-bg: linear-gradient(135deg, #0E3B38 0%, #3F7A3A 100%); --cv-mark: #D4F07A; --cv-dot: #A8D62A; }
.cover.bg-lime { --cv-bg: linear-gradient(135deg, #D2EE6A 0%, #8DBF1F 100%); --cv-mark: #0E3B38; --cv-dot: #0E3B38; }
.cover.bg-ocean { --cv-bg: linear-gradient(135deg, #0B2E4A 0%, #1F7A8C 100%); --cv-mark: #A6EEF5; --cv-dot: #A6EEF5; }
.cover.bg-sunset { --cv-bg: linear-gradient(135deg, #F6B26B 0%, #E0565B 100%); --cv-mark: #FFFFFF; --cv-dot: #FFFFFF; }
.cover.bg-violet { --cv-bg: linear-gradient(135deg, #2B1E5C 0%, #7B4FD6 100%); --cv-mark: #E3D6FF; --cv-dot: #E3D6FF; }
.cover.bg-night { --cv-bg: linear-gradient(135deg, #0B1220 0%, #233047 100%); --cv-mark: #A8D62A; --cv-dot: #A8D62A; }
.cover.bg-sand { --cv-bg: linear-gradient(135deg, #F7F1E3 0%, #E4D6B8 100%); --cv-mark: #0E3B38; --cv-dot: #0E3B38; }
#page-blog .head-area { padding: 48px 32px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
#page-blog .head-area .txt { max-width: 620px; }
#page-blog .head-area .eyebrow { margin-bottom: 16px; }
#page-blog .head-area .h1 { margin: 0; }
#page-blog .tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#page-blog .tools .search-box { width: 300px; max-width: 100%; height: 44px; }
#page-blog .chips { display: flex; gap: 6px; flex-wrap: wrap; }
#page-blog .chips button { height: 32px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--c-line-2); background: #ffffff; font-size: 12px; font-weight: 600; color: var(--c-text-2); cursor: pointer; }
#page-blog .chips button.on { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; }
#page-blog .posts-area { padding: 24px 32px 56px; }
#page-blog .featured { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 40px; align-items: center; margin-bottom: 40px; }
#page-blog .featured .cover { aspect-ratio: 16 / 10; }
#page-blog .cover img, #page-post .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#page-blog .cover.img::after, #page-post .cover.img::after { display: none; }
#page-blog .featured .mark { font-size: 72px; }
#page-blog .featured .t { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 35px; letter-spacing: -0.03em; margin: 16px 0 12px; text-wrap: pretty; }
#page-blog .featured .d { font-size: 14px; line-height: 23px; color: var(--c-muted); margin: 0 0 20px; }
#page-blog .featured .more { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
#page-blog .featured:hover .t { color: var(--c-primary-hover); }
#page-blog .boxes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
#page-blog .box .cover { aspect-ratio: 16 / 10; margin-bottom: 16px; }
#page-blog .box .mark { font-size: 40px; }
#page-blog .box .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 23px; letter-spacing: -0.02em; margin: 12px 0 8px; }
#page-blog .box .d { font-size: 13px; line-height: 21px; color: var(--c-muted); margin: 0; }
#page-post .post-area { padding: 40px 32px 56px; }
#page-post .head { max-width: 760px; margin: 0 auto 32px; }
#page-post .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); margin-bottom: 24px; }
#page-post .head .h1 { margin: 16px 0 14px; }
#page-post .head .lead { font-size: 16px; line-height: 26px; margin-bottom: 24px; }
#page-post .author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--c-line-2); }
#page-post .avatar { width: 40px; height: 40px; border-radius: 9999px; background: var(--c-sand); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
#page-post .author .txt { flex: 1; min-width: 0; }
#page-post .author .t { font-size: 14px; font-weight: 600; }
#page-post .author .d { font-size: 12px; color: var(--c-muted-2); }
#page-post .post-area > .cover { max-width: 960px; margin: 0 auto 40px; aspect-ratio: 21 / 9; }
#page-post .post-area > .cover .mark { font-size: 96px; }
#page-post .body { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 28px; color: var(--c-text-2); }
#page-post .body h2 { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -0.02em; color: var(--c-primary); margin: 40px 0 14px; }
#page-post .body p { margin: 0 0 18px; }
#page-post .body strong { color: var(--c-primary); }
#page-post .body a { color: var(--c-primary); font-weight: 600; text-decoration: underline; }
#page-post .body blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--c-lime); font-size: 18px; line-height: 29px; color: var(--c-primary); }
#page-post .body blockquote p { margin: 0; }
#page-post .body ol { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; }
#page-post .body ol li { counter-increment: step; position: relative; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--c-line-2); }
#page-post .body ol li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--c-lime-dark); }
#page-post .body ul { margin: 0 0 18px; padding-left: 22px; }
#page-post .post-area > .cta-area { max-width: 960px; margin: 48px auto 0; border-radius: 18px; }
#page-post .related-area { padding: 48px 32px 56px; }
#page-post .related-area .h2 { margin-bottom: 24px; }
#page-post .related-area .boxes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
#page-post .related-area .box { border: 1px solid var(--c-line-2); border-radius: 16px; padding: 22px; }
#page-post .related-area .box:hover { border-color: var(--c-faint); }
#page-post .related-area .t { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 22px; margin-top: 12px; }
@media (max-width: 1024px) {
  #page-blog .featured { grid-template-columns: 1fr; gap: 20px; }
  #page-blog .boxes, #page-post .related-area .boxes { grid-template-columns: 1fr 1fr; }
  #page-blog .tools { align-items: flex-start; }
}
@media (max-width: 768px) {
  #page-blog .head-area { padding: 28px 16px 16px; }
  #page-blog .posts-area { padding: 16px 16px 40px; }
  #page-blog .tools, #page-blog .tools .search-box { width: 100%; }
  #page-blog .featured .t { font-size: 24px; line-height: 29px; }
  #page-blog .boxes, #page-post .related-area .boxes { grid-template-columns: 1fr; }
  #page-post .post-area { padding: 24px 16px 40px; }
  #page-post .related-area { padding: 32px 16px 40px; }
  #page-post .post-area > .cover .mark { font-size: 56px; }
  #page-post .body { font-size: 15px; line-height: 26px; }
  #page-post .author { flex-wrap: wrap; }
}
#page-auction .item .v { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* ============================================================
   DROPPING DOMAIN (one name's page)
   ============================================================ */
#page-drop .top-area { padding: 32px 32px 56px; }
#page-drop .crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); margin-bottom: 28px; flex-wrap: wrap; }
#page-drop .crumbs a { color: var(--c-muted); }
#page-drop .crumbs a:hover { color: var(--c-primary); }
#page-drop .crumbs span { color: var(--c-primary); font-weight: 600; overflow-wrap: anywhere; }
#page-drop .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
#page-drop .head .txt { flex: 1 1 420px; min-width: 0; }
#page-drop .head .eyebrow { margin-bottom: 16px; }
#page-drop .h1 { font-size: 48px; line-height: 52px; overflow-wrap: anywhere; }
#page-drop .lead { max-width: 620px; }
#page-drop .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
#page-drop .card { flex: 0 1 320px; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; border: 1px solid var(--c-line-2); background: #ffffff; }
#page-drop .card .price { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#page-drop .card .price .k { font-size: 12px; color: var(--c-muted-2); }
#page-drop .card .price .v { font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#page-drop .card .dark-btn, #page-drop .card .line-btn { justify-content: center; width: 100%; }
#page-drop .card .line-btn.lg { height: 48px; }
#page-drop .facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 40px 0 0; }
#page-drop .facts div { padding: 18px 20px; border-radius: 14px; background: var(--c-soft, #f6f7f5); }
#page-drop .facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 6px; }
#page-drop .facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-primary); font-variant-numeric: tabular-nums; }
#page-drop .how { font-size: 13px; line-height: 21px; color: var(--c-muted); margin: 24px 0 0; max-width: 760px; }
#page-drop .how a { font-weight: 600; color: var(--c-primary); text-decoration: underline; }
#page-drop .more-area { padding: 0 32px 88px; }
#page-drop .more-area .h2 { margin: 0 0 20px; }
#page-drop .names { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
#page-drop .names a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--c-line-2); background: #ffffff; color: inherit; }
#page-drop .names a:hover { border-color: var(--c-primary); }
#page-drop .names .t { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; }
#page-drop .names .left { font-size: 12px; color: var(--c-muted-2); white-space: nowrap; }
@media (max-width: 1024px) {
  #page-drop .facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #page-drop .names { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  #page-drop .top-area { padding: 24px 16px 40px; }
  #page-drop .more-area { padding: 0 16px 56px; }
  #page-drop .h1 { font-size: 32px; line-height: 36px; }
  #page-drop .card { flex: 1 1 100%; }
  #page-drop .names { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   SSL CERTIFICATES
   ============================================================ */
#page-ssl .hero-area { padding: 48px 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
#page-ssl .hero-area .eyebrow { margin-bottom: 16px; }
#page-ssl .hero-area .lead { max-width: 620px; }
#page-ssl .products-area { padding: 16px 32px 40px; }
#page-ssl .boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
#page-ssl .box { display: flex; flex-direction: column; padding: 26px; border-radius: 16px; border: 1px solid var(--c-line-2); background: #ffffff; }
#page-ssl .box.pop { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(168,214,42,0.28); }
#page-ssl .box .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#page-ssl .box .t { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: -0.03em; color: var(--c-primary); }
#page-ssl .box .tag { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 9999px; padding: 5px 11px; background: var(--c-lime); color: var(--c-primary); }
#page-ssl .box .d { font-size: 13px; line-height: 19px; color: var(--c-muted); margin-bottom: 20px; min-height: 38px; }
#page-ssl .box .from { font-size: 13px; color: var(--c-muted-2); margin: auto 0 6px; }
#page-ssl .box .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
#page-ssl .box .price .v { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#page-ssl .box .price .per { font-size: 13px; color: var(--c-muted); }
#page-ssl .feats { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid #eaeef3; display: flex; flex-direction: column; gap: 8px; }
#page-ssl .feats li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
#page-ssl .feats i { color: #16a330; font-size: 16px; }
#page-ssl .box .dark-btn { height: 46px; justify-content: center; }
#page-ssl .foot { font-size: 12px; color: var(--c-muted-2); margin: 20px 0 0; text-align: center; }
#page-ssl .steps-area { padding: 24px 32px 88px; }
#page-ssl .steps-area .h2 { margin: 0 0 20px; }
#page-ssl .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
#page-ssl .steps li { padding: 22px; border-radius: 16px; background: var(--c-soft); }
#page-ssl .steps .n { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--c-muted-2); }
#page-ssl .steps .t { font-weight: 700; font-size: 16px; color: var(--c-primary); margin: 10px 0 6px; }
#page-ssl .steps .d { font-size: 13px; line-height: 20px; color: var(--c-muted); }
@media (max-width: 768px) {
  #page-ssl .hero-area { padding: 28px 16px 16px; }
  #page-ssl .products-area { padding: 8px 16px 28px; }
  #page-ssl .steps-area { padding: 16px 16px 56px; }
  #page-ssl .steps { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   DOMAINS FOR SALE (home, list, one domain) and EXTENSION pages
   ============================================================ */
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.market-grid .mcard { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 22px; border-radius: 14px; border: 1px solid var(--c-line-2); background: #ffffff; transition: box-shadow 160ms ease, border-color 160ms ease; }
.market-grid .mcard:hover { border-color: var(--c-primary); box-shadow: 0 6px 18px rgba(14,59,56,0.08); }
.market-grid .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.market-grid .name { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--c-primary); overflow-wrap: anywhere; min-width: 0; }
.market-grid .name:hover { text-decoration: underline; }
.market-grid .price { flex: none; font-family: var(--f-display); font-weight: 700; font-size: 18px; color: #16a330; font-variant-numeric: tabular-nums; }
.market-grid .price.offer { font-family: var(--f-text); font-size: 12px; font-weight: 600; color: var(--c-muted); }
.market-grid .bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.market-grid .more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-text-2); }
.market-grid .more:hover { color: var(--c-primary); }
.market-grid .dark-btn, .market-grid .line-btn { height: 38px; padding: 0 16px; font-size: 12px; }
@media (max-width: 1024px) { .market-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .market-grid { grid-template-columns: minmax(0,1fr); } }

#page-home .market-area { padding: 64px 32px 24px; }
#page-home .market-area .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
#page-home .market-area .eyebrow { margin-bottom: 14px; }
#page-home .market-area .h2 { margin: 0 0 8px; }
#page-home .market-area .texts { font-size: 13px; line-height: 20px; color: var(--c-muted); margin: 0; }
#page-home .market-area .more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-primary); }

#page-market .list-area { padding: 40px 32px 88px; }
#page-market .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
#page-market .head .txt { max-width: 560px; }
#page-market .head .eyebrow { margin-bottom: 16px; }
#page-market .tools { display: flex; gap: 10px; flex-wrap: wrap; }
#page-market .search-box { width: 280px; max-width: 100%; }
#page-market select { height: 44px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--c-input); background: #ffffff; font-size: 13px; font-weight: 600; color: var(--c-primary); }
#page-market .pages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
#page-market .pages a { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--c-input); background: #ffffff; color: var(--c-primary); }
#page-market .pages a.on { background: var(--c-primary); border-color: var(--c-primary); color: #ffffff; }
#page-market .pages .gap { color: var(--c-muted-2); padding: 0 2px; }

#page-sale .top-area, #page-tld .top-area { padding: 32px 32px 48px; }
#page-sale .crumbs, #page-tld .crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); margin-bottom: 28px; flex-wrap: wrap; }
#page-sale .crumbs a, #page-tld .crumbs a { color: var(--c-muted); }
#page-sale .crumbs span, #page-tld .crumbs span { color: var(--c-primary); font-weight: 600; overflow-wrap: anywhere; }
#page-sale .head, #page-tld .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
#page-sale .head .txt, #page-tld .head .txt { flex: 1 1 420px; min-width: 0; }
#page-sale .head .eyebrow, #page-tld .head .eyebrow { margin-bottom: 16px; }
#page-sale .h1 { font-size: 52px; line-height: 56px; overflow-wrap: anywhere; }
#page-sale .lead, #page-tld .lead { max-width: 620px; }
#page-sale .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
#page-sale .card, #page-tld .card { flex: 0 1 340px; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; border: 1px solid var(--c-line-2); background: #ffffff; }
#page-sale .card .price { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#page-sale .card .price .k { font-size: 12px; color: var(--c-muted-2); }
#page-sale .card .price .v { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; color: #16a330; font-variant-numeric: tabular-nums; }
#page-sale .card .price .v.small { font-size: 22px; color: var(--c-primary); }
#page-sale .card .dark-btn, #page-sale .card .line-btn { justify-content: center; width: 100%; }
#page-sale .card .line-btn.lg { height: 48px; }
#page-sale .trust { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid #eaeef3; display: flex; flex-direction: column; gap: 8px; }
#page-sale .trust li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--c-text-2); }
#page-sale .trust i { color: #16a330; font-size: 15px; }
#page-sale .offer-area { padding: 8px 32px 48px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 32px; align-items: start; scroll-margin-top: 80px; }
#page-sale .offer-area .h2 { margin: 0 0 10px; }
#page-sale .offer-area .texts { font-size: 13px; line-height: 21px; color: var(--c-muted); margin: 0; }
#page-sale .offer-form { position: relative; padding: 22px; border-radius: 18px; background: var(--c-soft); }
#page-sale .offer-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-sale .offer-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#page-sale .offer-form .label { font-size: 12px; font-weight: 600; color: var(--c-text-2); }
#page-sale .offer-form .label span { font-weight: 400; color: var(--c-muted-2); }
#page-sale .offer-form input, #page-sale .offer-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-input); background: #ffffff; font: inherit; font-size: 14px; }
#page-sale .offer-form .hp { position: absolute; left: -9999px; }
#page-sale .offer-form .form-err { color: #b42318; font-size: 13px; margin: 0 0 12px; }
#page-sale .offer-form .sent { text-align: center; padding: 24px 0; }
#page-sale .offer-form .sent i { font-size: 36px; color: #16a330; }
#page-sale .offer-form .sent .t { font-weight: 700; font-size: 16px; color: var(--c-primary); margin: 8px 0 4px; }
#page-sale .offer-form .sent .d { font-size: 13px; color: var(--c-muted); }
#page-sale .more-area { padding: 8px 32px 88px; }
#page-sale .more-area .h2 { margin: 0 0 20px; }

#page-tld .h1 { font-size: 48px; line-height: 52px; }
#page-tld .search { display: flex; gap: 10px; margin-top: 24px; max-width: 520px; }
#page-tld .search input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 9999px; border: 1px solid var(--c-input); font-size: 15px; }
#page-tld .soon { margin-top: 20px; font-size: 13px; color: var(--c-muted); }
#page-tld .card .from { font-size: 13px; color: var(--c-muted-2); }
#page-tld .card .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#page-tld .card .price .v { font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#page-tld .card .price .per { font-size: 13px; color: var(--c-muted); }
#page-tld .rows { margin: 0; padding-top: 14px; border-top: 1px solid #eaeef3; display: flex; flex-direction: column; gap: 8px; }
#page-tld .rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
#page-tld .rows dt { color: var(--c-muted-2); }
#page-tld .rows dd { margin: 0; font-weight: 600; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
#page-tld .card .note { font-size: 11px; color: var(--c-muted-2); margin: 6px 0 0; }
#page-tld .faq-area, #page-tld .others-area { padding: 8px 32px 40px; }
#page-tld .faq-area .h2, #page-tld .others-area .h2 { margin: 0 0 18px; }
#page-tld .faqs { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
#page-tld details { padding: 16px 20px; border-radius: 14px; border: 1px solid var(--c-line-2); background: #ffffff; }
#page-tld summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--c-primary); }
#page-tld details p { margin: 10px 0 0; font-size: 13px; line-height: 21px; color: var(--c-muted); }
#page-tld .others { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
#page-tld .others a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--c-line-2); background: #ffffff; }
#page-tld .others a:hover { border-color: var(--c-primary); }
#page-tld .others .t { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--c-primary); }
#page-tld .others .p { font-size: 12px; color: var(--c-muted); }
#page-tld .others-area { padding-bottom: 88px; }
#page-prices .tld a.t { color: inherit; text-decoration: none; }
#page-prices .tld a.t:hover { text-decoration: underline; }
@media (max-width: 1024px) { #page-tld .others { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px) {
  #page-home .market-area { padding: 40px 16px 16px; }
  #page-market .list-area { padding: 28px 16px 56px; }
  #page-sale .top-area, #page-tld .top-area { padding: 24px 16px 32px; }
  #page-sale .h1 { font-size: 34px; line-height: 38px; }
  #page-tld .h1 { font-size: 32px; line-height: 36px; }
  #page-sale .card, #page-tld .card { flex: 1 1 100%; }
  #page-sale .offer-area { grid-template-columns: minmax(0,1fr); padding: 8px 16px 32px; }
  #page-sale .offer-form .two { grid-template-columns: minmax(0,1fr); }
  #page-sale .more-area { padding: 8px 16px 56px; }
  #page-tld .faq-area, #page-tld .others-area { padding: 8px 16px 32px; }
  #page-tld .others { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* search: a card or row waits for its own answer; the other popular extensions on request */
#page-search .card.checking .tag { background: var(--c-soft); color: var(--c-muted); animation: search-wait 1.2s ease-in-out infinite; }
#page-search .card.checking .buy, #page-search .card.checking .why { visibility: hidden; }
#page-search .item.checking .state span { animation: search-wait 1.2s ease-in-out infinite; color: var(--c-muted); }
#page-search .item.taken .name .t { color: var(--c-muted); }
#page-search .chip.taken { background: #f3f4f6; color: var(--c-text-2); }
#page-search .others { margin: 24px 0 8px; }
#page-search .others > .line-btn { height: 44px; padding: 0 22px; font-size: 13px; }
@keyframes search-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { #page-search .card.checking .tag, #page-search .item.checking .state span { animation: none; } }
/* the other popular extensions and the similar names: two separate lists, with room between them */
#page-search .others .more-list { margin-top: 4px; }
#page-search .results-area > .more-list { margin-top: 48px; }