[x-cloak] {
    display: none !important;
}

/* JS'siz açılır menüler (bkz. layouts/nav.php): <summary> öğesinin
   tarayıcı tarafından çizilen üçgen işaretini kaldırır. */
.no-marker {
    list-style: none;
}

.no-marker::-webkit-details-marker {
    display: none;
}

/* Akordiyon (bkz. faq/index.php + faq-accordion.js). Chrome, <details>
   [open] olmadığında summary-dışı içeriğe UA seviyesinde content-visibility
   uygular; bu, geçiş [open] kaldırılırken/eklenirken çakışıp animasyonu
   ilk açılıştan sonra (kapanışta ve tekrar açılışta) anında kesiyordu.
   Bu yüzden görünürlüğü [open] yerine JS'in yönettiği data-expanded'a
   bağlıyoruz: faq-accordion.js, [open] özniteliğini YALNIZCA animasyon
   bitince değiştiriyor, animasyon süresince hep açık kalıyor — böylece
   Chrome'un content-visibility mekanizması geçişin ortasına hiç girmiyor.
   Gerçek açık yükseklik (scrollHeight) her seferinde ölçülüp max-height'a
   yazılıyor; sabit bir max-height kısa cevapları da aynı sürede "anında
   açılmış" gibi gösteriyordu. */
details.accordion > .accordion-body {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

details.accordion[data-expanded='true'] > .accordion-body {
    opacity: 1;
}

/* ---------------------------------------------------------------
   Hesap paneli yüzey dili
   Gölgeli yüzen kartlar yerine ince çizgili, hizalı yapı.
   --------------------------------------------------------------- */

.card {
    background: #ffffff;
    border: 1px solid #e3e5f0;
    border-radius: 14px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #eff0f6;
}

/* Küçük, harf aralıklı bölüm etiketi */
.eyebrow {
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7185;
}

/* Sayı, tutar, tarih ve kimlikler için hizalı rakamlar */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
}

/* Etiket / değer listesi */
.facts > div + div {
    border-top: 1px solid #f1f2f8;
}

.facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
}

/* Bölünmüş bilgi şeridi: mobilde yatay çizgi, masaüstünde dikey */
.strip > div + div {
    border-top: 1px solid #eff0f6;
}

@media (min-width: 640px) {
    .strip > div + div {
        border-top: 0;
        border-left: 1px solid #eff0f6;
    }
}

/* Konuşma rayı */
.thread {
    position: relative;
}

.thread > li {
    position: relative;
    padding-left: 44px;
    padding-bottom: 24px;
}

.thread > li:last-child {
    padding-bottom: 0;
}

.thread > li::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 0;
    width: 1px;
    background: #e6e8f2;
}

.thread > li:last-child::before {
    display: none;
}

/* Fatura dönem şeridi */
.period-track {
    display: flex;
    gap: 4px;
}

.period-seg {
    flex: 1 1 0;
    height: 6px;
    border-radius: 3px;
    background: #ececec;
}

.period-seg[data-state='odendi'] {
    background: #2e9e5b;
}

.period-seg[data-state='bekliyor'] {
    background: #d98a06;
}

.period-seg[data-state='iptal'] {
    background: #e0a29b;
}

/* ---------------------------------------------------------------
   Fiyatlandırma: Aylık / Yıllık geçişi
   Kayan "thumb"un konumu ve genişliği JS tarafından (pricing-period.js)
   etkin düğmeden ölçülür; etiket metni değişse de hizada kalır.
   --------------------------------------------------------------- */

.period-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 9999px;
    background: #f1f2f8;
    border: 1px solid #e3e5f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.period-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    overflow: hidden;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 6px 16px rgba(15, 23, 42, 0.1);
    /* Yaylanan geçiş: hafif bir aşma (overshoot) ile yerine oturur. */
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.45s ease;
    will-change: transform, width;
}

/* İlk ölçümde thumb 0 genişlikten büyümesin: açılışta geçiş kapalı. */
.period-switch.is-init .period-thumb {
    transition: none;
}

/* Yıllığa geçildiğinde marka renginde hafif bir hale. */
.period-switch[data-active='yillik'] .period-thumb {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 6px 18px rgba(var(--color-primary-rgb, 241, 95, 34), 0.28);
}

/* Thumb yerine otururken üzerinden geçen ışık. */
.period-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
    transform: translateX(-120%);
}

.period-switch.is-moving .period-thumb::after {
    animation: period-shine 0.6s ease-out;
}

@keyframes period-shine {
    to {
        transform: translateX(120%);
    }
}

.period-opt {
    position: relative;
    z-index: 1;
    padding: 8px 22px;
    border: 0;
    border-radius: 9999px;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #6b7185;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s ease;
}

.period-opt:hover {
    color: #3f4457;
}

.period-opt:active {
    transform: scale(0.97);
}

.period-opt[aria-pressed='true'] {
    color: var(--color-primary, #f15f22);
}

/* Kazanç rozeti, ait olduğu seçeneğin (Yıllık) içinde durur; ayrı bir
   etiket olarak yan yana konduğunda hangi düğmeyi anlattığı belirsizdi. */
.period-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(46, 158, 91, 0.14);
    color: #2e7d51;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
    transition: background 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.period-opt[aria-pressed='true'] .period-tag {
    background: rgba(46, 158, 91, 0.18);
    transform: scale(1.05);
}

/* Fiyat değişiminde küçük bir "pop": sayı sayarken canlı dursun. */
.price-pop {
    animation: price-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes price-pop {
    from {
        transform: scale(0.94);
        opacity: 0.6;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Klavye erişilebilirliği.
   --color-primary, Panel > Ayarlar'daki ana renkten gelir (Views/layouts/theme.php). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #f15f22);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

.icon-svg {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-fill {
    stroke-width: 2.5px;
}

.icon-bg-blue {
    background-color: rgba(241, 95, 34, 0.1);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
}

/* Form alanı — tek yerden. Sayfalar `bg-[#F8FAFC] border-[#E2E8F0] ...`
   tekrarlamak yerine yalnızca `form-input` (+ genişlik/boyut yardımcıları)
   kullanır; renkler --color-primary üzerinden marka rengini izler.
   NOT: `.form-input`, Tailwind CDN'in `forms` eklentisinin (head.php'deki
   `?plugins=forms`) KENDİ ayırdığı sınıf adıyla birebir çakışıyor; o eklenti
   de aynı özgüllükte (`.form-input`) beyaz zemin + gri kenarlık + 0 radius
   basıyor ve yükleme sırasına göre üstümüze binebiliyor. Eleman+sınıf
   birleşimiyle (`input.form-input`) özgüllüğü kasıtlı olarak bir tık
   yükseltip garantiye alıyoruz. */
input.form-input,
select.form-input,
textarea.form-input {
    display: block;
    width: 100%;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 0.625rem;
    font: inherit;
    color: #333333;
    transition: all 0.2s ease-in-out;
}

/* Dolgu (padding) ayrı ve `:where()` ile özgüllüksüz: bir ikon için
   `pl-10`/`pl-2xl` gibi bir Tailwind sınıfı eklendiğinde o KAZANSIN diye.
   Yukarıdaki blokta kalsaydı (eleman+sınıf özgüllüğü) sayfadaki hiçbir
   dolgu yardımcı sınıfı onu geçemezdi — arama kutularındaki ikonların
   metnin üstüne binmesi bu yüzdendi. */
:where(input.form-input, select.form-input, textarea.form-input) {
    padding: 8px 16px;
}

input.form-input::placeholder,
select.form-input::placeholder,
textarea.form-input::placeholder {
    color: #999999;
}

input.form-input:focus,
select.form-input:focus,
textarea.form-input:focus {
    border-color: var(--color-primary, #f15f22);
    box-shadow: 0 0 0 3px rgba(241, 95, 34, 0.12);
    outline: none;
}

input.form-input.has-error,
select.form-input.has-error,
textarea.form-input.has-error {
    border-color: #c23b2e;
}

body.page-demo {
    background-color: #F8FAFC;
}

/* ---------------------------------------------------------------
   Kaydırma çubukları

   İki ayrı kural gerekiyor çünkü iki tarayıcı ailesi aynı şeyi farklı
   söylüyor: Firefox `scrollbar-*` özelliklerini, Chrome/Safari
   `::-webkit-scrollbar` sözde öğelerini anlıyor. İkisi de yazılmazsa
   çubuk tarayıcıya göre bazen ince ve renkli, bazen kalın ve gri olur.

   Renkler `currentColor` DEĞİL sabit rgba: kaydırma çubuğu, içindeki
   metnin rengini miras alsaydı koyu sidebar'da siyah bir çubuk çıkardı.

   Firefox'ta `thin` gerçekten inceltir ama genişliği ayarlanamaz; webkit
   tarafında 10px seçildi — 6px'in altı fareyle yakalanamayacak kadar dar.
   --------------------------------------------------------------- */

/* Sayfa ve açık zeminli kutular */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.22);
    /* Çubuğun kenara yapışmaması için: kenarlık saydam, zemin sadece
       içeriğe boyanıyor (background-clip), böylece ince bir boşluk kalıyor. */
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15, 23, 42, 0.38);
}

/* İki eksen de kayabilen kutularda köşedeki gri kare */
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Panel sidebar'ı: zemin koyu olduğu için çubuk açık renk olmalı */
.panel-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.panel-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
}

.panel-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.32);
}