/*
 * LucidCP tema eklentileri.
 *
 * new-theme.css temel iskeleti kurar (navbar, hero, mockup, bento, fiyat).
 * Bu dosya, temanin HTML sayfalarina gomulu olan <style> bloklarini tek yerde
 * toplar — her sayfa ayni siniflari kullanabilsin.
 *
 * FeedHive referansi: cerceve YOK, golge YOK; beyaz kart lavanta tuvalden
 * kendiliginden kalkar. Tokenlar new-theme.css :root'unda.
 */

/* ---------------------------------------------------------- navbar
 *
 * Temada sag taraftaki iki dugme <button>, bizde <a> (gercek adrese gidiyorlar).
 * Bag etiketi buton stilini oldugu gibi almaz — alti cizili, satir ici ve
 * ortalanmamis cikar. Asagidaki kurallar ikisini ayni gosterir.
 */
.navbar .btn-login,
.navbar .btn-get-started {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.navbar .brand { text-decoration: none; }
.brand .logo-img { display: block; }
.navbar .brand svg { width: 26px; height: 26px; flex-shrink: 0; }

/* Menudeki AI bagi: ikon + etiket yan yana */
.nav-links .nav-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-brand-violet);
    font-weight: 600;
}
.nav-links .nav-ai img { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.nav-links .nav-ai:hover { color: var(--color-ink); }

/* Yedi bag her ekranda sigmiyor; dar alanda araligi kisariz */
@media (max-width: 1180px) {
    .nav-links { gap: 20px; }
    .nav-links a { font-size: var(--text-body-sm); }
}
/*
 * Bu genislikte bag + dugmeler tek satira sigmiyor ve dugmeler ekran disina
 * tasiyordu. Baglar ikinci satira iner ve yatay kayar — gizlemek yerine,
 * cunku ayri bir mobil menu yok; gizlersek telefonda gezinme kalmaz.
 * Nav yuksekligi degisir: yapiskan ogeler --nav-yuksekligi'ni kullanir.
 */
@media (max-width: 1040px) {
    :root { --nav-yuksekligi: 114px; }
    .navbar { flex-wrap: wrap; row-gap: 12px; }
    .nav-links {
        order: 3;
        width: 100%;
        gap: 22px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { white-space: nowrap; }
}
/* Telefonda iki-uc satirlik nav'i sabit tutmak ekranin beste birini yer; akisa birakilir */
@media (max-width: 640px) {
    :root { --nav-yuksekligi: 0px; }
    .navbar-band { position: static; }
}

/* ---------------------------------------------------------- kelime kaydirma
 *
 * Kelimeler AYNI izgara hucresinde ust uste durur: kutu en uzun kelimeye gore
 * olculur, gecis sirasinda satir zıplamaz. Her kelime 2sn gorunur; dongu
 * kelime sayisi x 2sn olmak ZORUNDA, aksi halde hicbir kelimenin gorunmedigi
 * bos kareler olusur. Kelime sayisi admin'den degistigi icin sure burada
 * degiskenle, @keyframes ise index.php'de kelime sayisina gore uretilir
 * (keyframe yuzdeleri CSS degiskeni kabul etmiyor).
 */
.slider { display: inline-grid; overflow: hidden; height: 1.1em; vertical-align: bottom; }
.slider__word {
    grid-area: 1 / 1;
    display: block;
    opacity: 0;
    animation: kelime-kay calc(var(--kelime-sayisi, 1) * 2s) infinite;
    animation-delay: calc(var(--sira, 0) * 2s);
}
@media (prefers-reduced-motion: reduce) {
    .slider__word { animation: none; }
    .slider__word:first-child { opacity: 1; }
}

/* Gradient Text Accent — baslik icinde TEK bir ifadede */
.grad-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------- bolum ritmi (80px) */
section.full-section { padding: 40px 0; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 {
    font-size: var(--text-heading);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--color-ink);
}
.section-header p {
    color: var(--color-muted-iris);
    font-size: var(--text-body-lg);
    line-height: 1.56;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------------------------------------------------------- entegrasyon
 *
 * Uclunculerin (cPanel, Plesk, Linux...) marka renkleri bilerek korunuyor:
 * bir "desteklenenler" seridinde logolar kendi rengiyle tanidik kalmali,
 * bu sitenin kendi vurgu paleti degil.
 */
.integration-card {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.integration-card .icon-area {
    width: 64px; height: 64px;
    border-radius: var(--radius-icons);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
}
.integration-card .card-label { font-weight: 500; font-size: var(--text-body); color: var(--color-ink); }

/* ---------------------------------------------------------- modul kartlari */
.module-card {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.module-card-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.module-card-title { font-size: var(--text-subheading); font-weight: 600; color: var(--color-ink); }
.module-icon {
    width: 48px; height: 48px;
    background: var(--color-soft-blue-wash);
    border: none;
    border-radius: var(--radius-icons);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-brand-violet);
    flex-shrink: 0;
}
.module-icon svg { width: 20px; height: 20px; }
.module-card p { font-size: var(--text-body); color: var(--color-muted-iris); line-height: 1.56; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--element-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--element-gap); }

/* ---------------------------------------------------------- ikili bolumler */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 40px 0;
}
/* Sirayi order ile ceviririz: direction:rtl metin hizalamasini da bozuyordu */
.split-section.reverse .split-visual { order: 2; }
.split-section.reverse .split-text { order: 1; }
.split-visual {
    background: var(--gradient-surface);
    border: none;
    border-radius: var(--radius-cards);
    overflow: hidden;
}
.split-visual img { width: 100%; display: block; }
.split-visual .icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    gap: 24px;
    justify-items: center;
    justify-content: center;
    padding: 40px;
}
.split-visual .icon-grid img { width: 80px; height: 80px; border-radius: var(--radius-images); }

/*
 * Gorsel yer tutucu.
 *
 * Temayla gelen bazi ekran goruntuleri baska bir urune ait; onlari koymaktansa
 * temaya uyan soyut bir blok cizeriz. Gercek ekran goruntuleri hazir olunca
 * bu bloklarin yerine <img> konur.
 */
.visual-placeholder {
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--gradient-surface);
    color: var(--color-muted-iris);
    text-align: center;
    padding: 32px;
}
.visual-placeholder svg { width: 48px; height: 48px; color: var(--color-brand-violet); }
.visual-placeholder span { font-size: var(--text-body-sm); }

.visual-placeholder.lg { aspect-ratio: 16 / 9; gap: 24px; }
.visual-placeholder.lg svg { width: 80px; height: 80px; }
.visual-placeholder.lg span { font-size: var(--text-body); }

/*
 * Etiketler. Sistemde tek vurgu rengi var; bolumleri renkle degil metinle
 * ayiriyoruz — eski tag-green/pink/teal siniflari ayni gorunume duser.
 */
.tag {
    display: inline-block;
    font-size: var(--text-body-sm);
    font-weight: 500;
    padding: 6px 16px;
    border-radius: var(--radius-buttons);
    margin-bottom: 16px;
    background: var(--color-soft-blue-wash);
    color: var(--color-brand-violet);
    border: none;
}
.tag-blue, .tag-green, .tag-pink, .tag-teal, .tag-purple, .tag-yellow, .tag-orange {
    background: var(--color-soft-blue-wash);
    color: var(--color-brand-violet);
    border: none;
}

.split-text h2 {
    font-size: var(--text-heading);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--color-ink);
}
.split-text p {
    color: var(--color-muted-iris);
    font-size: var(--text-body);
    line-height: 1.56;
    margin-bottom: 24px;
}

/* Notr (ghost) buton */
.btn-split {
    background: transparent;
    border: 1px solid var(--color-border-mist);
    color: var(--color-ink);
    padding: 12px 24px;
    border-radius: var(--radius-buttons);
    font-size: var(--text-body);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.2s;
}
.btn-split:hover { border-color: var(--color-brand-violet); }

/* Primary Pill Button */
.btn-cta {
    padding: 12px 24px;
    font-size: var(--text-body);
    font-weight: 500;
    background: var(--gradient-brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-buttons);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta.ghost {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-border-mist);
}
.btn-cta.ghost:hover { border-color: var(--color-brand-violet); }

/* ---------------------------------------------------------- referanslar */
.avatar-stack { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.avatar-stack .yuzler { display: flex; }
.avatar-stack .yuzler span {
    width: 40px; height: 40px;
    border-radius: var(--radius-icons);
    background: var(--gradient-brand);
    border: 2px solid var(--color-card-white);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-body-sm);
    font-weight: 600;
    margin-left: -8px;
}
.avatar-stack .yuzler span:first-child { margin-left: 0; }
.avatar-stack .not { font-size: var(--text-body-sm); color: var(--color-muted-iris); }

.testimonial-card {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.testimonial-header { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
    width: 48px; height: 48px;
    border-radius: var(--radius-icons);
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: var(--text-body);
    flex-shrink: 0;
}
.testimonial-name { font-weight: 600; font-size: var(--text-body); color: var(--color-ink); }
.testimonial-role { font-size: var(--text-body-sm); font-weight: 400; color: var(--color-muted-iris); }
.testimonial-text { font-size: var(--text-body); color: var(--color-ink); line-height: 1.56; }
/* Star Rating Badge — sistem paletinin disinda, evrensel derecelendirme rengi */
.stars { color: #fbbf24; letter-spacing: 2px; }

/* ---------------------------------------------------------- fiyat kartlari */
.pricing-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--element-gap);
    margin-top: 32px;
}
.price-card {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: 32px var(--card-padding);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.price-card.popular { background: var(--color-soft-blue-wash); }
.popular-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: var(--text-caption);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-buttons);
}
.price-card-name { font-size: var(--text-subheading); font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
.price-card.popular .price-card-name { color: var(--color-brand-violet); }
.price-card-desc { font-size: var(--text-body-sm); color: var(--color-muted-iris); margin-bottom: 24px; }
.price-card-amount {
    font-size: var(--text-heading-lg);
    line-height: 1.11;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    color: var(--color-ink);
}
.price-card-amount .unit { font-size: var(--text-heading-sm); font-weight: 400; color: var(--color-muted-iris); }
.price-card.popular .price-card-amount { color: var(--color-brand-violet); }
.price-card.popular .price-card-amount .unit { color: var(--color-brand-violet); }
.price-card-period { font-size: var(--text-body-sm); color: var(--color-muted-iris); margin-bottom: 24px; }
.price-card-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--radius-buttons);
    text-align: center;
    font-weight: 500;
    font-size: var(--text-body);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 24px;
    border: none;
}
.price-card-btn.default {
    background: transparent;
    border: 1px solid var(--color-border-mist);
    color: var(--color-ink);
}
.price-card-btn.default:hover { border-color: var(--color-brand-violet); }
.price-card-btn.highlight { background: var(--gradient-brand); color: #fff; }
.price-card-btn.highlight:hover { transform: translateY(-2px); }

.price-features { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.price-feature { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-body); line-height: 1.56; }
.price-feature.included { color: var(--color-ink); }
.price-feature.excluded { color: var(--color-hover-iris); }
.feature-icon-yes { color: var(--color-brand-violet); flex-shrink: 0; margin-top: 4px; width: 18px; height: 18px; }
.feature-icon-no  { color: var(--color-border-mist); flex-shrink: 0; margin-top: 4px; width: 18px; height: 18px; }

/* ---------------------------------------------------------- karsilastirma */
.comp-table-wrapper {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    overflow-x: auto;
    margin-top: 16px;
}
.comp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.comp-table th, .comp-table td {
    padding: 16px 24px;
    text-align: center;
    border-bottom: 1px solid var(--color-border-mist);
    font-size: var(--text-body);
}
.comp-table th {
    background: var(--color-lavender-canvas);
    font-weight: 600;
    color: var(--color-muted-iris);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-caption);
}
.comp-table th.popular-col { color: var(--color-brand-violet); }
.comp-table td:first-child { text-align: left; color: var(--color-ink); }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table .check { color: var(--color-brand-violet); width: 18px; height: 18px; }
.comp-table .cross { color: var(--color-border-mist); width: 18px; height: 18px; }
.comp-table .partial { color: var(--color-muted-iris); font-size: var(--text-body-sm); }

/* ---------------------------------------------------------- CTA + footer */
.cta-footer-wrapper {
    position: relative;
    background: var(--color-lavender-canvas);
    width: 100%;
    margin-top: var(--section-gap);
}
.cta-wide { position: relative; padding: 100px 24px 80px; text-align: center; overflow: hidden; }
.cta-wide h2 { font-size: var(--text-heading-lg); line-height: 1.11; font-weight: 700; letter-spacing: -0.02em; }
.footer-wide { border-top: 1px solid var(--color-border-mist); padding: 64px 0 32px; }
.cta-icon-img { position: absolute; width: 160px; pointer-events: none; z-index: 0; }
.cta-icon-left { left: 0; top: -20px; transform: rotate(-14deg); }
.cta-icon-right { right: 0; bottom: -20px; transform: rotate(12deg); }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
.footer-col h4 {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}
.footer-col .links { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--color-muted-iris); text-decoration: none; font-size: var(--text-body); }
.footer-col a:hover { color: var(--color-ink); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 40px; height: 40px;
    border-radius: var(--radius-icons);
    background: var(--color-card-white);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-muted-iris);
    text-decoration: none;
}
.footer-social a:hover { color: var(--color-brand-violet); }
.footer-bottom {
    border-top: 1px solid var(--color-border-mist);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
}

/* ---------------------------------------------------------- duyuru seridi */
.announce-bar {
    background: var(--color-soft-blue-wash);
    border: none;
    border-radius: 0;
    padding: 12px 24px;
    text-align: center;
    font-size: var(--text-body-sm);
    color: var(--color-ink);
}

/* ---------------------------------------------------------- bildirimler
 *
 * Basari/hata renkleri marka paletinin disinda tutulur: bunlar anlam tasiyan
 * sistem renkleridir — kullanicinin durumu bir bakista ayirt etmesi lazim.
 */
.flash {
    border-radius: var(--radius-mid);
    padding: 14px 20px;
    font-size: var(--text-body);
    border: 1px solid transparent;
    margin-top: 16px;
}
.flash-success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.flash-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.flash-info    { background: var(--color-soft-blue-wash); border-color: transparent; color: var(--color-brand-violet); }

/* ---------------------------------------------------------- formlar */
.form-card {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: 40px;
    max-width: 460px;
    margin: 64px auto;
}
.form-card h1 { font-size: var(--text-heading-sm); font-weight: 700; margin-bottom: 8px; color: var(--color-ink); }
.form-card .sub { color: var(--color-muted-iris); font-size: var(--text-body); margin-bottom: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: var(--text-body-sm); color: var(--color-muted-iris); font-weight: 500; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border-mist);
    background: var(--color-card-white);
    color: var(--color-ink);
    font-size: var(--text-body);
    font-family: inherit;
}
.field input::placeholder { color: var(--color-muted-iris); }
/* Odak halkasi 2px vurgu — golge degil, cerceve */
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--color-brand-violet);
    outline-offset: -2px;
    border-color: var(--color-brand-violet);
}
.field .hint { font-size: var(--text-caption); color: var(--color-muted-iris); line-height: 1.5; }
.form-foot { margin-top: 24px; text-align: center; color: var(--color-muted-iris); font-size: var(--text-body-sm); }
.form-foot a { color: var(--color-brand-violet); text-decoration: none; }

/* ---------------------------------------------------------- urun sayfasi */
.product-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.product-panel {
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    padding: 32px var(--card-padding);
    position: sticky;
    top: calc(var(--nav-yuksekligi) + 16px);
}
.product-price { font-size: var(--text-heading-lg); font-weight: 700; letter-spacing: -0.03em; color: var(--color-ink); }
.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-mist);
    border-radius: var(--radius-buttons);
    overflow: hidden;
    background: var(--color-card-white);
    width: fit-content;
}
.qty-box button {
    width: 44px; height: 44px;
    background: transparent;
    border: none;
    color: var(--color-muted-iris);
    font-size: var(--text-body-lg);
    cursor: pointer;
}
.qty-box input {
    width: 56px; height: 44px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border-mist);
    border-right: 1px solid var(--color-border-mist);
    color: var(--color-ink);
    text-align: center;
    font-size: var(--text-body);
}
.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------- duyarli */
@media (max-width: 992px) {
    .pricing-grid-full { grid-template-columns: 1fr; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .product-layout { grid-template-columns: 1fr; }
    .product-panel { position: static; }
}
@media (max-width: 900px) {
    .split-section { grid-template-columns: 1fr; gap: 32px; }
    .split-section.reverse .split-visual { order: 1; }
    .split-section.reverse .split-text { order: 2; }
    .cta-icon-img { display: none; }
    .section-header h2, .split-text h2 { font-size: var(--text-heading-sm); }
    .cta-wide { padding: 64px 24px 48px; }
    .cta-wide h2 { font-size: var(--text-heading); }
}
@media (max-width: 640px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .form-card { padding: var(--card-padding); }
}

/* ---------------------------------------------------------------- odeme */
.odeme-sayfa { max-width: 720px; margin: 0 auto; }

.odeme-ozet {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: var(--card-padding);
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
    margin-bottom: 32px;
}
.odeme-ozet h1 { font-size: var(--text-heading-sm); margin: 4px 0 8px; color: var(--color-ink); }
.odeme-ozet .desc { color: var(--color-muted-iris); font-size: var(--text-body); margin: 0; }
.odeme-tutar { text-align: right; flex-shrink: 0; }
.odeme-tutar span { display: block; color: var(--color-muted-iris); font-size: var(--text-body-sm); margin-bottom: 4px; }
.odeme-tutar strong { font-size: var(--text-heading-sm); color: var(--color-ink); white-space: nowrap; }

.odeme-baslik { font-size: var(--text-subheading); font-weight: 600; margin-bottom: 16px; color: var(--color-ink); }
.odeme-yontemler { display: flex; flex-direction: column; gap: 12px; }
.odeme-yontem { margin: 0; }

/* Butonun kendisi kart: form icinde oldugu icin <button>, gorunum <a> gibi */
.odeme-yontem-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px var(--card-padding);
    background: var(--color-card-white);
    border: 1px solid transparent;
    border-radius: var(--radius-cards);
    color: var(--color-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}
.odeme-yontem-btn:hover {
    border-color: var(--color-brand-violet);
    transform: translateY(-2px);
}
.odeme-yontem-btn .oy-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-icons);
    background: var(--color-soft-blue-wash);
    color: var(--color-brand-violet);
}
.odeme-yontem-btn:not(.anlik) .oy-ikon { background: var(--color-lavender-canvas); color: var(--color-muted-iris); }
.odeme-yontem-btn .oy-metin { flex: 1; min-width: 0; }
.odeme-yontem-btn .oy-metin strong { display: block; font-size: var(--text-body); margin-bottom: 4px; }
.odeme-yontem-btn .oy-metin small { color: var(--color-muted-iris); font-size: var(--text-body-sm); line-height: 1.45; }
.odeme-yontem-btn .oy-ok {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
}
.odeme-yontem-btn.anlik .oy-ok { color: var(--color-brand-violet); }

/* PayTR kendi sayfasini iframe icinde acar. Yukseklik bilinemez; ic kaydirma
 * acik birakilir ki uzun taksit tablosu kirpilmasin. */
.odeme-cerceve {
    background: #fff;
    border-radius: var(--radius-mid);
    overflow: hidden;
    border: 1px solid var(--color-border-mist);
}
.odeme-cerceve iframe { display: block; width: 100%; height: 700px; border: 0; }

.odeme-yonlendirme { text-align: center; padding: 48px 16px; color: var(--color-muted-iris); }

.odeme-not {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
    margin-top: 24px;
    text-align: center;
}
.odeme-not a { color: var(--color-brand-violet); }

.odeme-sonuc {
    text-align: center;
    padding: 56px 32px;
    background: var(--color-card-white);
    border: none;
    border-radius: var(--radius-cards);
}
.odeme-sonuc h1 { font-size: var(--text-heading-sm); margin: 16px 0 12px; color: var(--color-ink); }
.odeme-sonuc p { color: var(--color-muted-iris); line-height: 1.56; margin: 0 auto 8px; max-width: 460px; }
.odeme-sonuc.ok       i[data-lucide] { color: #059669; }
.odeme-sonuc.bekliyor i[data-lucide] { color: #b45309; }
.odeme-sonuc.hata     i[data-lucide] { color: #dc2626; }

.odeme-sonuc-butonlar {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.odeme-sonuc-butonlar .price-card-btn { width: auto; margin-bottom: 0; }

/* Urun sayfasindaki "su yontemlerle odeyebilirsin" rozetleri */
.odeme-rozetleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-mist);
}
.odeme-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-buttons);
    background: var(--color-lavender-canvas);
    color: var(--color-muted-iris);
    font-size: var(--text-caption);
    white-space: nowrap;
}
.odeme-rozet i { color: var(--color-brand-violet); flex-shrink: 0; }

.donuyor { animation: odeme-don 1.4s linear infinite; }
@keyframes odeme-don { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .odeme-ozet { flex-direction: column; gap: 20px; }
    .odeme-tutar { text-align: left; }
    .odeme-yontem-btn .oy-ok span { display: none; }
    .odeme-sonuc-butonlar { flex-direction: column; }
    .odeme-sonuc-butonlar .price-card-btn { width: 100%; }
}

/* ================================================================ entegrasyon dizini
 * Liste: solda kategori kenar cubugu + arama + kart izgarasi. Detay: baslik,
 * bolum menusu, iki sutun (icerik + yan kutu). Kartlar cercevesiz beyaz.
 */
.ent-dizin {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/*
 * Kenar cubugu KUTUSUZ: dogrudan tuval uzerinde durur (WiseCP'deki gibi).
 * Beyaz kart icine koymak, kart izgarasiyla yarisan ikinci bir kutu yaratip
 * alani sikistiriyordu. Adlar koyu, yalnizca ikon ve sayilar soluk.
 * Nav'in altinda yapisik kalir; uzun listede kategoriler kaybolmaz.
 */
.ent-kategoriler {
    position: sticky;
    top: calc(var(--nav-yuksekligi) + 24px);
}
.ent-kategoriler-baslik {
    display: block;
    padding: 0 12px 16px;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-iris);
}
.ent-kategoriler nav { display: flex; flex-direction: column; gap: 4px; }
.ent-kategoriler a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--color-ink);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.15s;
}
.ent-kategoriler a svg { flex-shrink: 0; color: var(--color-muted-iris); }
.ent-kategoriler a .ad { flex: 1; min-width: 0; }
.ent-kategoriler a .adet {
    font-size: 13px;
    color: var(--color-muted-iris);
    font-variant-numeric: tabular-nums;
}
/* Secili/uzerinde: tuvalden hafifce KOYU dolgu — vurgu mavisinin cok seyrek hali */
.ent-kategoriler a:hover { background: rgba(68, 87, 255, 0.04); }
.ent-kategoriler a.aktif { background: rgba(68, 87, 255, 0.07); font-weight: 500; }
.ent-kategoriler a.aktif svg { color: var(--color-brand-violet); }
.ent-kategoriler a.aktif .adet { color: var(--color-ink); font-weight: 500; }
/* "Tumu" ile kategoriler arasi cizgi degil bosluk */
.ent-kategoriler a.tumu { margin-bottom: 20px; }

/* Kenar cubugu yer kapladigi icin 3 kart sigmayan ara genislik. Alt sinir sart:
   bu secici .ent-izgara'dan ozgul, yoksa telefondaki tek sutun kuralini ezerdi */
@media (min-width: 993px) and (max-width: 1100px) {
    .ent-dizin .ent-izgara { grid-template-columns: repeat(2, 1fr); }
}

/* Dar ekran: kenar cubugu izgaranin USTUNE gecer ve yatay kayan seride doner */
@media (max-width: 992px) {
    /* minmax(0,1fr) + min-width:0 sart: duz 1fr, kayan seridin TUM genisligi kadar
       genisler ve kartlari ekrandan tasirir (serit kaydirma kutusu olsa da) */
    .ent-dizin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ent-kategoriler { position: static; min-width: 0; }
    .ent-kategoriler-baslik { display: none; }
    .ent-kategoriler nav { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .ent-kategoriler a {
        flex-shrink: 0;
        white-space: nowrap;
        gap: 8px;
        padding: 10px 16px;
        border-radius: var(--radius-buttons);
        background: var(--color-card-white);
    }
    .ent-kategoriler a .ad { flex: none; }
    .ent-kategoriler a .adet { background: var(--color-lavender-canvas); padding: 2px 8px; border-radius: var(--radius-buttons); }
    .ent-kategoriler a.aktif { background: var(--color-soft-blue-wash); }
    .ent-kategoriler a.aktif .adet { background: var(--color-card-white); }
    .ent-kategoriler a.tumu { margin-bottom: 0; }
}

.ent-baslik-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ent-baslik-satir h2 { font-size: var(--text-heading-sm); font-weight: 600; color: var(--color-ink); }

.ent-arama {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 380px);
}
.ent-arama.genis { width: min(100%, 520px); margin-top: 8px; }
.ent-arama svg, .ent-arama i { position: absolute; left: 16px; color: var(--color-muted-iris); pointer-events: none; }
.ent-arama input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--color-border-mist);
    border-radius: var(--radius-buttons);
    background: var(--color-card-white);
    color: var(--color-ink);
    font-size: var(--text-body);
    font-family: inherit;
}
.ent-arama input:focus { outline: 2px solid var(--color-brand-violet); outline-offset: -2px; }

.ent-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--element-gap);
}

.ent-kart {
    background: var(--color-card-white);
    border: 1px solid transparent;
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}
.ent-kart:hover { border-color: var(--color-brand-violet-light); transform: translateY(-2px); }
.ent-kart[hidden] { display: none; }
.ent-kart-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.ent-kart h3 { font-size: var(--text-subheading); font-weight: 600; color: var(--color-ink); }
.ent-kart p { font-size: var(--text-body-sm); line-height: 1.57; color: var(--color-muted-iris); flex: 1; }
.ent-kart-kat {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-mist);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-iris);
}

/* Logo kutusu: gorsel, ikon ya da bas harf ayni olcude durur */
.ent-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-mid);
    background: var(--color-lavender-canvas);
    color: var(--color-brand-violet);
    font-size: 24px;
}
.ent-logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
.ent-logo.harf { font-size: var(--text-body); font-weight: 700; letter-spacing: 0.02em; }
.ent-logo.buyuk { width: 80px; height: 80px; border-radius: var(--radius-cards); background: var(--color-card-white); font-size: 36px; }
.ent-logo.buyuk img { max-width: 52px; max-height: 52px; }
.ent-logo.buyuk.harf { font-size: var(--text-heading-sm); }

/* Anasayfa izgarasi ayni logo yardimcisini kullanir */
.integration-card .icon-area { background: var(--color-lavender-canvas); color: var(--color-brand-violet); }
.integration-card .icon-area img { max-width: 36px; max-height: 36px; object-fit: contain; }
.integration-card .icon-area.harf { font-size: var(--text-subheading); font-weight: 700; }
a.integration-card { transition: border-color 0.2s, transform 0.2s; border: 1px solid transparent; }
a.integration-card:hover { border-color: var(--color-brand-violet-light); transform: translateY(-2px); }

.ent-rozetler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ent-rozet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-buttons);
    background: var(--color-soft-blue-wash);
    color: var(--color-brand-violet);
    font-size: var(--text-caption);
    font-weight: 600;
    white-space: nowrap;
}
.ent-rozet.yakinda { background: var(--color-lavender-canvas); color: var(--color-muted-iris); }
.ent-rozet.ucretli { background: var(--color-ink); color: #fff; }
.ent-rozet.yerlesik { background: #ecfdf5; color: #047857; }

.ent-bos { text-align: center; color: var(--color-muted-iris); padding: 48px 0; }
.ent-bos a { color: var(--color-brand-violet); }

.ent-talep {
    background: var(--gradient-surface);
    border-radius: var(--radius-cards);
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ent-talep h2 { font-size: var(--text-heading-sm); font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
.ent-talep p { color: var(--color-muted-iris); max-width: 520px; }

/* ---- detay ---- */
.ent-detay-bas { padding: 48px 0 24px; }
.ent-geri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
    text-decoration: none;
    margin-bottom: 24px;
}
.ent-geri:hover { color: var(--color-ink); }
.ent-kimlik { display: flex; gap: 24px; align-items: flex-start; }
.ent-ad-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ent-ad-satir h1 { font-size: var(--text-heading-lg); line-height: 1.11; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; }
.ent-kimlik > div > p { font-size: var(--text-body-lg); color: var(--color-muted-iris); max-width: 720px; }
.ent-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: var(--text-body-sm); color: var(--color-muted-iris); }
.ent-meta a, .ent-meta span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ent-meta a:hover { color: var(--color-brand-violet); }

/* Bolum menusu: sayfa kayarken nav'in hemen altinda kalir */
.ent-bolum-menu {
    position: sticky;
    top: calc(var(--nav-yuksekligi) + 4px);
    z-index: 20;
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px;
    margin-bottom: 24px;
    background: var(--color-card-white);
    border-radius: var(--radius-buttons);
}
.ent-bolum-menu a {
    padding: 8px 16px;
    border-radius: var(--radius-buttons);
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.ent-bolum-menu a:hover { background: var(--color-lavender-canvas); color: var(--color-ink); }

.ent-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--element-gap); align-items: start; }
.ent-ana { display: flex; flex-direction: column; gap: var(--element-gap); }
.ent-kutu {
    background: var(--color-card-white);
    border-radius: var(--radius-cards);
    padding: 32px;
    scroll-margin-top: calc(var(--nav-yuksekligi) + 70px);
}
.ent-kutu h2 { font-size: var(--text-heading-sm); font-weight: 600; color: var(--color-ink); margin-bottom: 16px; }
.ent-kutu p { color: var(--color-ink); line-height: 1.63; }
.ent-kutu p + p { margin-top: 12px; }

.ent-liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ent-liste li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-ink); line-height: 1.5; }
.ent-liste li svg, .ent-liste li i { color: var(--color-brand-violet); flex-shrink: 0; margin-top: 2px; }

.ent-tablo div, .ent-bilgi div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-mist);
}
.ent-tablo div:last-child, .ent-bilgi div:last-child { border-bottom: none; }
.ent-tablo dt, .ent-bilgi dt { color: var(--color-muted-iris); }
.ent-tablo dd, .ent-bilgi dd { color: var(--color-ink); font-weight: 500; text-align: right; }

.ent-yan { position: sticky; top: calc(var(--nav-yuksekligi) + 70px); display: flex; flex-direction: column; gap: var(--element-gap); }
.ent-fiyat strong { display: block; font-size: var(--text-heading); line-height: 1.25; font-weight: 700; color: var(--color-ink); margin-bottom: 8px; }
.ent-fiyat p { color: var(--color-muted-iris); font-size: var(--text-body-sm); }
.ent-butonlar { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ent-butonlar .btn-cta { justify-content: center; }

/* ================================================================ yardim merkezi */
.yardim-kanallar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--element-gap); }
.yardim-kanal {
    background: var(--color-card-white);
    border: 1px solid transparent;
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}
.yardim-kanal:hover { border-color: var(--color-brand-violet-light); }
.yardim-kanal .module-icon { margin-bottom: 8px; font-size: 20px; }
.yardim-kanal strong { font-size: var(--text-body-lg); color: var(--color-ink); }
.yardim-kanal span:last-child { font-size: var(--text-body-sm); color: var(--color-muted-iris); }
.yardim-grup { margin-bottom: 40px; }
.yardim-grup[hidden], .faq-item[hidden] { display: none; }
.yardim-grup h3 {
    max-width: 800px;
    margin: 0 auto 16px;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted-iris);
}
.yardim-grup .faq-section { margin-top: 0; }

/* ================================================================ yasal sayfalar */
.yasal-metin {
    max-width: 820px;
    margin: 0 auto;
    background: var(--color-card-white);
    border-radius: var(--radius-cards);
    padding: 48px;
    color: var(--color-ink);
    font-size: var(--text-body);
    line-height: 1.7;
}
.muted-metin { color: var(--color-muted-iris); }
.muted-metin a { color: var(--color-brand-violet); }
.yasal-menu { max-width: 820px; margin: 24px auto 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.yasal-menu a {
    padding: 8px 16px;
    border-radius: var(--radius-buttons);
    background: var(--color-card-white);
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm);
    text-decoration: none;
}
.yasal-menu a:hover { color: var(--color-brand-violet); }

/* ================================================================ satin alma onayi */
.onay-kutusu {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--text-body-sm);
    line-height: 1.5;
    color: var(--color-muted-iris);
    cursor: pointer;
}
.onay-kutusu input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-brand-violet); }
.onay-kutusu a { color: var(--color-brand-violet); }

@media (max-width: 992px) {
    .ent-izgara { grid-template-columns: repeat(2, 1fr); }
    /* minmax(0,1fr): uzun icerik (tablo satiri, adim metni) sutunu ekrandan genis itmesin */
    .ent-duzen { grid-template-columns: minmax(0, 1fr); }
    .ent-yan { position: static; }
}
@media (max-width: 640px) {
    .ent-izgara { grid-template-columns: 1fr; }
    .ent-kimlik { flex-direction: column; gap: 16px; }
    .ent-ad-satir h1 { font-size: var(--text-heading); }
    .ent-liste { grid-template-columns: 1fr; }
    .ent-kutu, .yasal-metin { padding: var(--card-padding); }
    .ent-talep { padding: var(--card-padding); }
}

/* Yasal metin: numarali bolum basliklari ve paragraf araligi (bkz. yasal_html) */
.yasal-metin h2 {
    font-size: var(--text-body-lg);
    font-weight: 600;
    color: var(--color-ink);
    margin: 32px 0 12px;
}
.yasal-metin h2:first-child { margin-top: 0; }
.yasal-metin p + p { margin-top: 12px; }

/* Yatay kayan menulerde kaydirma cubugu gizli; parmakla/tekerle kaydirma calismaya devam eder */
.ent-bolum-menu, .ent-kategoriler nav { scrollbar-width: none; }
.ent-bolum-menu::-webkit-scrollbar, .ent-kategoriler nav::-webkit-scrollbar { display: none; }

/* Gercek logo: beyaz, ince cerceveli kare (marka ikonlari kendi zeminiyle gelir;
   lavanta kutu icinde renkli kareler "yamali" duruyordu) */
.ent-logo.gorsel,
.integration-card .icon-area.gorsel {
    background: var(--color-card-white);
    border: 1px solid var(--color-border-mist);
}
.ent-logo.gorsel img { border-radius: 6px; }

/* ================================================================ LStore (resmi eklenti magazasi) */
.lstore-adimlar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--element-gap);
}
.lstore-adimlar > div {
    background: var(--color-card-white);
    border-radius: var(--radius-cards);
    padding: var(--card-padding);
}
.lstore-adimlar span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 12px;
    border-radius: var(--radius-buttons);
    background: var(--color-soft-blue-wash);
    color: var(--color-brand-violet);
    font-size: var(--text-body-sm); font-weight: 700;
}
.lstore-adimlar strong { display: block; font-size: var(--text-body-lg); font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.lstore-adimlar p { color: var(--color-muted-iris); font-size: var(--text-body-sm); line-height: 1.57; }

.lstore-sekmeler {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    padding: 4px;
    background: var(--color-card-white);
    border-radius: var(--radius-buttons);
    max-width: 100%;
}
.lstore-sekmeler a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-buttons);
    color: var(--color-muted-iris);
    font-size: var(--text-body-sm); font-weight: 500;
    text-decoration: none;
}
.lstore-sekmeler a span { padding: 1px 8px; border-radius: var(--radius-buttons); background: var(--color-lavender-canvas); font-size: var(--text-caption); }
.lstore-sekmeler a:hover { color: var(--color-ink); }
.lstore-sekmeler a.aktif { background: var(--color-soft-blue-wash); color: var(--color-brand-violet); font-weight: 600; }
.lstore-sekmeler a.aktif span { background: var(--color-card-white); color: var(--color-brand-violet); }

.ent-logo.lstore-ikon { background: var(--color-soft-blue-wash); color: var(--color-brand-violet); }
.ent-logo.buyuk.lstore-ikon svg { width: 36px; height: 36px; }

.lstore-kart-alt {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--color-border-mist);
}
.lstore-fiyat { display: flex; flex-direction: column; line-height: 1.25; }
.lstore-fiyat small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-muted-iris); }
.lstore-fiyat strong { font-size: var(--text-subheading); font-weight: 700; color: var(--color-ink); }
.lstore-fiyat em { font-style: normal; font-size: var(--text-caption); color: var(--color-muted-iris); }
.lstore-fiyat.ucretsiz { font-size: var(--text-body); font-weight: 700; color: #047857; }
.lstore-git { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-brand-violet); white-space: nowrap; }

/* Detay: galeri */
.lstore-galeri { padding: 16px; }
.lg-ana { border-radius: 16px; overflow: hidden; background: var(--color-lavender-canvas); }
.lg-ana img { display: block; width: 100%; height: auto; }
.lg-kucukler { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.lg-kucukler button {
    flex: 0 0 96px; height: 64px; padding: 0;
    border: 2px solid transparent; border-radius: 10px;
    overflow: hidden; cursor: pointer; background: var(--color-lavender-canvas);
}
.lg-kucukler button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-kucukler button.aktif { border-color: var(--color-brand-violet); }

/* Detay: nasil calisir */
.lstore-akis { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lstore-akis li { display: flex; gap: 16px; align-items: flex-start; }
.lstore-akis li > span {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-buttons);
    background: var(--gradient-brand);
    color: #fff; font-weight: 700; font-size: var(--text-body-sm);
}
.lstore-akis strong { display: block; font-size: var(--text-body-lg); font-weight: 600; color: var(--color-ink); }
.lstore-akis p { color: var(--color-muted-iris); margin-top: 2px; }

/* Detay: satin alma kutusu */
.lstore-etiket { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-muted-iris); }
.lstore-plan { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 16px; }
.lstore-plan strong { font-size: var(--text-heading); line-height: 1.2; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; }
.lstore-plan span { color: var(--color-muted-iris); }
.lstore-form { display: flex; flex-direction: column; gap: 14px; }
.lstore-form .btn-cta { justify-content: center; }
.lstore-donemler { border: none; display: flex; flex-direction: column; gap: 8px; }
.lstore-donemler legend { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-muted-iris); margin-bottom: 6px; }
.lstore-donemler label {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border-mist);
    border-radius: 14px;
    cursor: pointer;
}
.lstore-donemler label:has(input:checked) { border-color: var(--color-brand-violet); background: #f5f6ff; }
.lstore-donemler input { accent-color: var(--color-brand-violet); }
.lstore-donemler span { flex: 1; color: var(--color-ink); font-weight: 500; }
.lstore-donemler strong { color: var(--color-ink); }
.lstore-lisans { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-body-sm); font-weight: 500; color: var(--color-muted-iris); }
.lstore-lisans select {
    padding: 12px 14px;
    border: 1px solid var(--color-border-mist);
    border-radius: 12px;
    background: var(--color-card-white);
    color: var(--color-ink);
    font: inherit; font-size: var(--text-body-sm);
}
.lstore-etkin {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 14px;
    border-radius: 14px;
    background: #ecfdf5; color: #047857;
    font-size: var(--text-body-sm); font-weight: 500;
}
.lstore-etkin svg { flex-shrink: 0; margin-top: 2px; }
.lstore-uyari { padding: 12px 14px; border-radius: 14px; background: #fffbeb; color: #92400e; font-size: var(--text-body-sm); }
.lstore-dokuman { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-brand-violet); text-decoration: none; }
.lstore-guvence { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border-mist); }
.lstore-guvence li { display: flex; gap: 8px; align-items: center; font-size: var(--text-body-sm); color: var(--color-muted-iris); }
.lstore-guvence svg { color: var(--color-brand-violet); flex-shrink: 0; }

@media (max-width: 992px) {
    .lstore-adimlar { grid-template-columns: 1fr; }
    .lstore-adimlar > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
    .lstore-adimlar span { grid-row: span 2; margin: 0; }
}
@media (max-width: 640px) {
    .lstore-sekmeler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: 20px; }
    .lstore-sekmeler a { white-space: nowrap; }
}

/* LStore: lisansa dahil ogeler (LucidCP ile gelen temalar) */
.lstore-fiyat.dahil { flex-direction: row; align-items: center; gap: 6px; font-size: var(--text-body-sm); font-weight: 600; color: #047857; }
.lstore-dahil-not { padding: 12px 14px; border-radius: 14px; background: #ecfdf5; color: #065f46; font-size: var(--text-body-sm); line-height: 1.55; }

/* ---- LStore: kart kapagi (ilk ekran goruntusu) ---- */
.lstore-kart.kapakli { overflow: hidden; }
.lstore-kapak {
    position: relative;
    display: block;
    margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 12px;
    aspect-ratio: 16 / 9;
    background: var(--gradient-surface);
    overflow: hidden;
}
.lstore-kapak img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.3s; }
.lstore-kart:hover .lstore-kapak img { transform: scale(1.03); }
.lstore-kapak-sayi {
    position: absolute; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-buttons);
    background: rgba(24, 28, 49, 0.72); color: #fff;
    font-size: 12px; font-weight: 600;
}

/* ---- LStore: urun sayfasi galerisi ---- */
.lstore-galeri .lg-ana {
    position: relative; display: block; width: 100%;
    padding: 0; border: none; cursor: zoom-in;
    font: inherit; text-align: left;
}
.lg-buyut {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-buttons);
    background: rgba(24, 28, 49, 0.72); color: #fff;
    font-size: var(--text-caption); font-weight: 600;
    opacity: 0; transition: opacity 0.2s;
}
.lg-ana:hover .lg-buyut, .lg-ana:focus-visible .lg-buyut { opacity: 1; }
.lg-alt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; min-height: 20px; }
.lg-baslik { color: var(--color-ink); font-size: var(--text-body-sm); font-weight: 500; }
.lg-sayac { color: var(--color-muted-iris); font-size: var(--text-caption); white-space: nowrap; }

.lg-perde {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 56px 72px;
    background: rgba(12, 14, 28, 0.92);
}
.lg-perde[hidden] { display: none; }
.lg-perde figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lg-perde img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; background: #fff; }
.lg-perde figcaption { color: #e5e7ff; font-size: var(--text-body-sm); text-align: center; }
.lg-perde button {
    position: absolute;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-buttons);
    background: rgba(255, 255, 255, 0.12); color: #fff;
    font-size: 30px; line-height: 1; cursor: pointer;
}
.lg-perde button:hover { background: rgba(255, 255, 255, 0.24); }
.lg-kapat { top: 16px; right: 16px; }
.lg-onceki { left: 16px; top: 50%; transform: translateY(-50%); }
.lg-sonraki { right: 16px; top: 50%; transform: translateY(-50%); }

.lstore-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0c0e1c; }
.lstore-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
    .lg-perde { padding: 56px 8px; }
    .lg-onceki, .lg-sonraki { top: auto; bottom: 16px; transform: none; }
    .lg-onceki { left: calc(50% - 56px); }
    .lg-sonraki { right: calc(50% - 56px); }
}

/* ================================================================ temalar vitrini */
/* Tarayici penceresi cercevesinde onizleme; tam sayfa goruntu uzerine gelince asagi kayar */
.tema-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.tema-izgara.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tema-kart {
    display: flex; flex-direction: column;
    background: var(--color-card-white);
    border-radius: var(--radius-cards);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.tema-kart:hover { box-shadow: 0 18px 48px rgba(32, 36, 138, 0.12); transform: translateY(-3px); }
.tema-pencere { display: block; margin: 14px 14px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-mist); background: #fff; text-decoration: none; }
.tema-cubuk, .lg-tarayici {
    display: flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    background: #f4f5fb;
    border-bottom: 1px solid var(--color-border-mist);
}
.tema-cubuk i, .lg-noktalar i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #d6d9e8; }
.tema-cubuk i:nth-child(1), .lg-noktalar i:nth-child(1) { background: #ff6159; }
.tema-cubuk i:nth-child(2), .lg-noktalar i:nth-child(2) { background: #ffbd2e; }
.tema-cubuk i:nth-child(3), .lg-noktalar i:nth-child(3) { background: #28c941; }
.tema-ekran { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gradient-surface); }
.tema-ekran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tema-ekran.kayan img { transition: object-position 7s ease-in-out; }
.tema-kart:hover .tema-ekran.kayan img, .tema-pencere:focus-visible .tema-ekran.kayan img { object-position: 50% 100%; }
.tema-bos { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--color-brand-violet); }
.tema-govde { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }
.tema-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tema-ust h3 { font-size: var(--text-subheading); font-weight: 700; color: var(--color-ink); letter-spacing: -0.01em; }
.tema-ust h3 a { color: inherit; text-decoration: none; }
.tema-govde > p { margin-top: 8px; color: var(--color-muted-iris); font-size: var(--text-body-sm); line-height: 1.6; flex: 1; }
.tema-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border-mist); }
.tema-meta { display: flex; align-items: baseline; gap: 10px; color: var(--color-muted-iris); font-size: var(--text-caption); }
.tema-meta strong { color: var(--color-ink); font-size: var(--text-body); font-weight: 700; }
.tema-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-cta.kucuk { padding: 9px 16px; font-size: var(--text-body-sm); gap: 6px; }
.tema-rozet {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-buttons);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tema-rozet.dahil   { background: #ecfdf5; color: #047857; }
.tema-rozet.satista { background: #fff7e6; color: #b45309; }
.tema-rozet.yakinda { background: #f4f4f8; color: #6b6f8a; }
.tema-ipucu { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--color-muted-iris); font-size: var(--text-caption); }
.tema-yan-dugmeler { flex-direction: column; margin-top: 16px; }
.tema-yan-dugmeler .btn-cta { width: 100%; }

/* Galeri: tarayici cercevesi (tema sayfasi) */
.lstore-galeri.tarayicili .lg-tarayici { border: 1px solid var(--color-border-mist); border-bottom: none; border-radius: 16px 16px 0 0; }
.lstore-galeri.tarayicili .lg-ana { border-radius: 0 0 16px 16px; border: 1px solid var(--color-border-mist); }
.lg-noktalar { display: flex; gap: 6px; }
.lg-adres {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 auto; padding: 3px 14px;
    border-radius: var(--radius-buttons);
    background: #fff; color: var(--color-muted-iris);
    font-size: 12px;
}

/* Galeri: tam sayfa goruntu — karede ustten kirpilir, uzerine gelince asagi kayar */
.lg-ana.uzun { aspect-ratio: 16 / 10; }
.lg-ana.uzun img { height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 9s ease-in-out; }
.lg-ana.uzun:hover img, .lg-ana.uzun:focus-visible img { object-position: 50% 100%; }
.lg-ana.uzun .lg-buyut { opacity: 1; }

/* Inceleme: tam sayfa goruntu tam genislikte, dikey kaydirilarak okunur */
.lg-kaydir { display: flex; justify-content: center; }
.lg-perde.uzun figure { width: 100%; height: 100%; }
.lg-perde.uzun .lg-kaydir {
    display: block;
    width: min(1200px, 100%); flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 12px; background: #fff;
}
.lg-perde.uzun img { width: 100%; max-height: none; border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
    .tema-ekran.kayan img, .lg-ana.uzun img { transition: none; }
}
@media (max-width: 992px) {
    .tema-izgara.uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tema-izgara, .tema-izgara.uclu { grid-template-columns: minmax(0, 1fr); }
    .tema-alt { flex-direction: column; align-items: stretch; }
    .tema-dugmeler .btn-cta { flex: 1; justify-content: center; }
}

/* ================================================================ anasayfa tema seridi */
/* Sabit boyutlu tema kartlari yatayda kesintisiz kayar; uzerine gelince durur */
.themes-track {
    overflow: hidden;
    padding: 12px 0 28px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.themes-inner { display: flex; gap: 24px; width: max-content; animation: tema-seridi 60s linear infinite; }
.themes-track:hover .themes-inner, .themes-track:focus-within .themes-inner { animation-play-state: paused; }
.themes-oge {
    position: relative; flex: 0 0 auto;
    width: 440px;
    border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid var(--color-border-mist);
    box-shadow: 0 12px 32px rgba(32, 36, 138, 0.10);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}
.themes-oge:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(32, 36, 138, 0.16); }
.themes-oge img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.themes-ad {
    position: absolute; left: 12px; bottom: 12px;
    padding: 5px 12px;
    border-radius: var(--radius-buttons);
    background: rgba(24, 28, 49, 0.78); color: #fff;
    font-size: 13px; font-weight: 600;
}
/* Iki tur arasi bosluk da kaydirilir; yoksa her turda 24px sicrar */
@keyframes tema-seridi { to { transform: translateX(calc(-50% - 12px)); } }
@media (max-width: 640px) {
    .themes-oge { width: 280px; }
    .themes-inner { gap: 16px; animation-duration: 45s; }
    @keyframes tema-seridi { to { transform: translateX(calc(-50% - 8px)); } }
}
@media (prefers-reduced-motion: reduce) {
    .themes-inner { animation: none; }
    .themes-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* ================================================================ paket sayfasi: yenileme secimi */
.yenile-secim { border: 1px solid var(--color-border-mist); border-radius: 16px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.yenile-secim legend { padding: 0 6px; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-muted-iris); }
.yenile-secenek { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.yenile-secenek input { margin-top: 4px; accent-color: var(--color-brand-violet); }
.yenile-secenek strong { display: block; color: var(--color-ink); font-size: var(--text-body); }
.yenile-secenek small { display: block; color: var(--color-muted-iris); font-size: var(--text-caption); line-height: 1.5; margin-top: 2px; }
.yenile-secim select {
    width: 100%; margin: 0 0 4px 26px; max-width: calc(100% - 26px);
    padding: 10px 12px; border: 1px solid var(--color-border-mist); border-radius: 12px;
    background: var(--color-card-white); color: var(--color-ink); font: inherit; font-size: var(--text-body-sm);
}
.yenile-secim select:disabled { opacity: 0.5; }