/* XTheme v2 — store.css (alan adı, bilgi bankası, içerik: yalnızca sayfa yerleşimi; bileşenleri geçersiz kılmaz) */

/* ---------- Alan adı: hero ---------- */
.dm-hero { padding-block: var(--s-8); }
.dm-hero-inner { max-width: 820px; }
.dm-hero .eyebrow { color: var(--c-sky); }
.dm-hero p { color: var(--c-ice); max-width: 620px; }
.dm-tabs { display: flex; gap: 0; margin: var(--s-5) 0 0; border-bottom: 1px solid rgba(96, 165, 250, .35); }
.dm-tab { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); font: 600 .9rem/1.2 var(--font); color: var(--c-ice); background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--t), background-color var(--t), border-color var(--t); }
.dm-tab:hover { background: rgba(96, 165, 250, .12); color: #fff; }
.dm-tab.active { color: #fff; border-bottom-color: var(--c-sky); }
.dm-tab:focus-visible { outline: 2px solid var(--c-sky); outline-offset: -2px; }
.dm-search { margin-top: var(--s-5); }
.dm-search-row { display: flex; gap: 0; align-items: stretch; }
.dm-search-row input[type=text] { height: 52px; flex: 1 1 auto; border: 0; outline: none; box-shadow: none; }
.dm-search-row input[type=text]:focus { border: 0; outline: none; box-shadow: none; }
.dm-search-row .btn { height: 52px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.dm-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.dm-chip { display: inline-block; margin: 0; cursor: pointer; }
.dm-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dm-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s-4); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ice); border: 1px solid rgba(96, 165, 250, .5); background: transparent; transition: background-color var(--t), color var(--t), border-color var(--t); }
.dm-chip:hover span { border-color: var(--c-sky); }
.dm-chip input:checked + span { background: var(--c-ice); color: var(--c-navy); border-color: var(--c-ice); }
.dm-chip input:focus-visible + span { outline: 2px solid var(--c-sky); outline-offset: 2px; }

/* ---------- Alan adı: sonuç satırları (domains.js üretir) ---------- */
.dm-results { padding: 0; }
.dm-row { display: grid; grid-template-columns: minmax(140px, 230px) 112px 100px auto; justify-content: start; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); min-height: 46px; border-bottom: var(--bd); }
.dm-row:last-child { border-bottom: 0; }
.dm-row:hover { background: #F7F9FC; }
.dm-name { font-weight: 800; color: var(--c-ink); font-size: 1.05rem; overflow-wrap: anywhere; }
.dm-price { font-weight: 800; color: var(--c-ink); white-space: nowrap; text-align: left; }
.dm-price small { color: var(--c-mute); font-weight: 400; margin-left: var(--s-1); }
.dm-add { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); margin: 0; }
.dm-status .badge, .dm-add > .badge { white-space: nowrap; }
.dm-row .lz-bar { height: 12px; }
.dm-add select { width: auto; min-width: 96px; height: 36px; }
.dm-msg { padding: var(--s-5); color: var(--c-body); }
.dm-msg.error { color: var(--c-danger); }

/* ---------- Alan adı: popüler uzantılar, adımlar ---------- */
.dm-tld h3 { font-size: 1.6rem; color: var(--c-navy); margin-bottom: var(--s-2); }
.dm-tld-price { font-size: 1.4rem; font-weight: 800; color: var(--c-ink); }
.dm-tld-price small { font-size: var(--fs-sm); color: var(--c-mute); font-weight: 400; }
.dm-steps { list-style: none; counter-reset: dm; display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.dm-steps li { counter-increment: dm; display: flex; gap: var(--s-4); align-items: flex-start; }
.dm-steps li::before { content: counter(dm); flex: 0 0 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--c-ice); color: var(--c-navy); font-weight: 800; }

/* ---------- Bilgi bankası ---------- */
.kb-hero { padding-block: var(--s-8); }
.kb-hero-inner { max-width: 720px; }
.kb-hero .eyebrow { color: var(--c-sky); }
.kb-search { display: flex; margin-top: var(--s-4); }
.kb-search input { height: 52px; flex: 1 1 auto; border-color: var(--c-sky); }
.kb-search .btn { height: 52px; }
.kb-cat .box-body { display: flex; flex-direction: column; gap: var(--s-2); }
.kb-cat h3 { margin: 0; font-size: 1.15rem; }
.kb-cat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--c-ice); color: var(--c-blue); font-size: 1.1rem; }
.kb-list li { border-bottom: var(--bd); }
.kb-list li:last-child { border-bottom: 0; }
.kb-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); color: var(--c-ink); font-weight: 600; transition: background-color var(--t), color var(--t); }
.kb-list a:hover { background: var(--c-ice); color: var(--c-navy); }
.kb-list small { color: var(--c-mute); font-weight: 400; }
.kb-list .empty { padding: var(--s-6); }

/* ---------- İçerik (makale, sayfa, duyuru) ---------- */
.content-narrow { max-width: 820px; }
.kb-article h1 { font-size: 2rem; padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 2px solid var(--c-navy); }
.content-body { font-size: 1.02rem; line-height: 1.8; max-width: 68ch; }
.content-body p { color: var(--c-body); }
.timeline { position: relative; display: grid; gap: var(--s-5); padding-left: var(--s-6); border-left: 2px solid var(--c-navy); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) - 7px); top: var(--s-5); width: 12px; height: 12px; background: var(--c-blue); border: 2px solid var(--c-bg); }
.timeline-date { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); margin-bottom: var(--s-2); }
.timeline-item h3 { margin-bottom: var(--s-2); }

@media (max-width: 760px) {
    .dm-row { grid-template-columns: 1fr auto; }
    .dm-add { grid-column: 1 / -1; justify-content: flex-start; }
    .dm-search-row, .kb-search { flex-direction: column; gap: var(--s-2); }
    .timeline { padding-left: var(--s-5); }
    .timeline-item::before { left: calc(-1 * var(--s-5) - 7px); }
}

/* Popüler uzantılar: kutu sayısı kaç olursa olsun tek satıra/dengeli dizilsin */
.dm-popular { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ============================================================
   PAKET KARTI (hosting) — fiyat bloğu, rozetler, özellik listesi, ipucu balonu, cPanel şeridi
   Renkler yalnız :root jetonlarından (--c-*). Köşeler keskin.
   ============================================================ */
.pkg-host { position: relative; gap: var(--s-4); }
.pkg-host.is-featured { border-color: var(--c-blue); border-top-width: 4px; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-blue); }
.pkg-top-chip { align-self: flex-start; margin-bottom: calc(var(--s-2) * -1); }
.pkg-top-chip[hidden] { display: none; }
.pkg-featured-badge { display: inline-block; padding: 4px 12px; background: var(--c-ink); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.pkg-host .pkg-name { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; }
.pkg-host .pkg-tag { font-size: .95rem; }
.pkg-host .pkg-head { padding-bottom: 0; border-bottom: 0; }

/* Fiyat alanı */
.pkg-price-area { display: flex; flex-direction: column; }
.pkg-price-view { display: flex; flex-direction: column; gap: var(--s-2); }
.pkg-discount-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-height: 28px; }
.pkg-old-val { color: var(--c-mute); font-size: 1.05rem; font-weight: 500; text-decoration: line-through; }
.pkg-old-val:empty { display: none; }
.pkg-save-tag { display: inline-block; padding: 3px 10px; background: var(--c-blue); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.pkg-save-tag:empty { display: none; }
.pkg-big-price { display: flex; align-items: flex-start; gap: 4px; color: var(--c-ink); line-height: 1; }
.pkg-num-int { font-size: clamp(3rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.pkg-meta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: .42em; }
.pkg-dec-sym { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; line-height: 1; color: var(--c-ink); white-space: nowrap; }
.pkg-period-txt { font-size: .95rem; font-weight: 600; color: var(--c-mute); line-height: 1; }

/* Dönem anahtarı: data-active-cycle kapsayıcıdan gelir (list.blade.php); hidden niteliğini ezer */
[data-active-cycle="monthly"] :is(.pkg-price-view, .vm-price-view):not([data-period="monthly"]),
[data-active-cycle="quarterly"] :is(.pkg-price-view, .vm-price-view):not([data-period="quarterly"]),
[data-active-cycle="semiannual"] :is(.pkg-price-view, .vm-price-view):not([data-period="semiannual"]),
[data-active-cycle="annual"] :is(.pkg-price-view, .vm-price-view):not([data-period="annual"]),
[data-active-cycle="biennial"] :is(.pkg-price-view, .vm-price-view):not([data-period="biennial"]) { display: none; }

/* Eylem düğmesi */
.pkg-btn-wrap form { margin: 0; }
.pkg-action-btn { width: 100%; padding-block: .85rem; font-size: 1.05rem; font-weight: 700; justify-content: center; }

/* Özellik listesi */
.pkg-host .pkg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pkg-host .pkg-list li { align-items: center; gap: .45rem; padding: 7px 0; border-bottom: 0; font-size: .98rem; color: var(--c-body); }
.pkg-host .pkg-list li::before { display: none; }
.pkg-feat-text strong { color: var(--c-ink); font-weight: 800; }

/* "?" ipucu + konuşma balonu */
.pkg-tip-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; color: var(--c-mute); font-size: .9rem; cursor: help; outline: none; line-height: 1; }
.pkg-tip-trigger:hover, .pkg-tip-trigger:focus-visible { color: var(--c-blue); }
.pkg-tip-trigger:focus-visible { box-shadow: 0 0 0 2px var(--c-ring); }
.pkg-speech-bubble {
    position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 12px);
    width: max-content; max-width: 220px; padding: 8px 11px;
    background: var(--c-ink); color: #fff; border: 1px solid var(--c-ink);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
    font-size: .72rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
    margin-left: var(--tip-shift, 0px); opacity: 0; visibility: hidden; transform: translateX(-50%);
    transition: opacity .15s ease, visibility .15s;
    pointer-events: none;
}
.pkg-speech-bubble::after {
    content: ""; position: absolute; left: calc(50% - var(--tip-shift, 0px)); top: 100%; width: 10px; height: 10px; margin-top: -5px;
    background: var(--c-ink); border-right: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink);
    transform: translateX(-50%) rotate(45deg);
}
.pkg-tip-trigger:hover .pkg-speech-bubble, .pkg-tip-trigger:focus .pkg-speech-bubble, .pkg-tip-trigger:focus-within .pkg-speech-bubble { opacity: 1; visibility: visible; }
/* tablo başlığındaki (Core) ipucu aşağı açılır */
.vm-head .vm-head-core .pkg-tip-trigger { min-width: 0; }
.vm-head .vm-head-core .pkg-speech-bubble { min-width: 0; width: 220px; bottom: auto; top: calc(100% + 10px); left: 50%; text-transform: none; letter-spacing: normal; font-weight: 400; color: #fff; white-space: normal; }
.vm-head .vm-head-core .pkg-speech-bubble::after { top: 0; margin-top: -5px; transform: translateX(-50%) rotate(225deg); }
.vm-head .vm-head-core .pkg-tip-trigger:hover .pkg-speech-bubble, .vm-head .vm-head-core .pkg-tip-trigger:focus .pkg-speech-bubble { opacity: 1; visibility: visible; }

/* Alt şerit: tek, geniş cPanel logosu */
.pkg-host .pkg-foot { margin-top: auto; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; }
.pkg-panel-ico { display: block; width: clamp(5rem, 8vw, 6.25rem); height: 1.75rem; margin: 0 auto; background-color: var(--c-mute); -webkit-mask: url(../images/panels/cpanel.svg) center / contain no-repeat; mask: url(../images/panels/cpanel.svg) center / contain no-repeat; }

/* VM satırı: dönem görünümleri */
.vm-price-view { display: flex; flex-direction: column; gap: 2px; }
.vm-price-view[hidden] { display: none; }

/* Liste sayfası: dönem anahtarı (Aylık / Yıllık) */
.pkg-cycle-switcher { display: flex; justify-content: center; margin: 0 0 var(--s-6); padding-top: 14px; }
.pkg-cycle-pill { display: inline-flex; border: 1px solid var(--c-line-strong); background: var(--c-white); padding: 3px; gap: 3px; }
.pkg-cycle-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: .55rem 1.3rem; border: 0; background: transparent; color: var(--c-body); font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--t), color var(--t); }
.pkg-cycle-btn:hover { color: var(--c-blue); }
.pkg-cycle-btn.is-active { background: var(--c-blue); color: #fff; }
.pkg-cycle-btn { position: relative; }
.pkg-cycle-discount-tag { display: inline-block; padding: 2px 8px; background: var(--c-ink); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.pkg-cycle-btn:not(.is-active) .pkg-cycle-discount-tag { background: var(--c-ice); color: var(--c-navy); }
.pkg-cycle-btn.is-active .pkg-cycle-discount-tag { background: #fff; color: var(--c-navy); }

/* Liste kapsayıcıları */
.lz-grid { align-items: stretch; }
.lz-more { margin-inline: auto; }

@media (max-width: 560px) {
    .pkg-num-int { font-size: 3.2rem; }
    .pkg-speech-bubble { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) { .pkg-speech-bubble { transition: none; } }


/* Alan adı sonuçları ve öneriler: doğrudan ızgara, yan yana kartlar */
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); padding: var(--s-4); }
.dm-grid:empty { display: none; }
.dm-grid > .dm-msg { grid-column: 1 / -1; padding: var(--s-2) 0; }
.dm-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--c-white); border: var(--bd); border-top: 3px solid var(--c-sky); transition: border-color var(--t); }
.dm-card:hover { border-color: var(--c-blue); border-top-color: var(--c-navy); }
.dm-card.is-taken { border-top-color: var(--c-line-strong); opacity: .6; }
.dm-card.is-taken .dm-card-name { color: var(--c-mute); }
.dm-card.is-error { border-top-color: var(--c-warning); }
.dm-card-name { font-size: 1.05rem; font-weight: 800; color: var(--c-ink); overflow-wrap: anywhere; line-height: 1.25; }
.dm-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: .85rem; }
.dm-card-price { font-weight: 800; color: var(--c-ink); white-space: nowrap; }
.dm-card-price small { color: var(--c-mute); font-weight: 400; }
.dm-card-act { display: flex; align-items: center; gap: var(--s-2); margin: auto 0 0; padding-top: var(--s-1); }
.dm-card-act select { width: auto; min-width: 82px; height: 36px; flex: 0 0 auto; }
.dm-card-act .btn { flex: 1 1 auto; justify-content: center; }
.dm-card-act.is-note { font-size: .85rem; color: var(--c-mute); min-height: 36px; }
.dm-card.is-loading .dm-card-act { min-height: 36px; }
.dm-card .lz-bar { height: 12px; }
.dm-card .lz-bar.dm-act-bar { height: 36px; width: 100%; }
.dm-card-meta { min-height: 26px; }
.dm-card-act { min-height: 40px; }
.dm-card.is-loading .dm-card-name, .dm-card-name { min-height: 1.3em; }
.dm-card-act select:disabled, .dm-card-act .btn:disabled { cursor: not-allowed; }

#dmResults.dm-grid { padding: 0; }
.dm-results-section + .dm-suggest, .dm-results-section .dm-suggest { margin-top: var(--s-4); }

/* Yıl seçici: hover/focus kenarlığı butonla aynı ince 1px (kalınlaşma yok) */
.dm-card-act select:hover:not(:disabled), .dm-card-act select:focus { border-color: var(--c-blue); outline: none; box-shadow: none; }

/* Önerilen alan adları: kutu görünümü yok; sade bölüm başlığı */
.dm-suggest.box { background: none; border: 0; box-shadow: none; padding: 0; }
.dm-suggest .box-title { background: none; border: 0; border-bottom: var(--bd); padding: 0 0 var(--s-2); margin: 0 0 var(--s-3); }
.dm-suggest .box-title h3 { font-size: 1.15rem; font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; text-transform: none; }
.dm-suggest .dm-grid { padding: 0; }
.dm-card-act .dm-epp { flex: 1 1 0; min-width: 0; height: 36px; }
.dm-card-act .dm-epp:hover:not(:disabled), .dm-card-act .dm-epp:focus { border-color: var(--c-blue); outline: none; box-shadow: none; }

/* Alan adı hero: metin solda, çizim sağda */
.dm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-7); align-items: center; }
.dm-hero-art img { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; }
@media (max-width: 960px) { .dm-hero-grid { grid-template-columns: 1fr; } .dm-hero-art { display: none; } }

/* Mobil: dönem anahtarı taşmasın (5 dönem) */
@media (max-width: 640px) {
    .pkg-cycle-switcher { padding-inline: 0; }
    .pkg-cycle-pill { max-width: 100%; flex-wrap: wrap; justify-content: center; }
    .pkg-cycle-btn { padding: .5rem .8rem; font-size: .88rem; flex: 1 1 auto; justify-content: center; }
}

/* Kategoriye göre bölümlendirilmiş vitrin listesi */
.xt-sections { display: flex; flex-direction: column; gap: 3.5rem; scroll-margin-top: 2rem; }
.xt-catalog-section { scroll-margin-top: 2rem; }
.xt-catalog-section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--c-line, #e2e8f0); }
.xt-catalog-section-titles h2 { font-size: 1.5rem; font-weight: 800; color: var(--c-ink, #0f172a); margin: 0 0 .25rem; }
.xt-catalog-section-titles p { margin: 0; color: var(--c-mute, #64748b); font-size: .95rem; }