/* Landing tasarimi — legacy_landing/index.html'den birebir devralindi.
   Hero grid, masonry duzen, flip efektleri, overlay ve responsive kurallar. */

body {
    background-color: #0b0c0f;
    color: #ffffff;
    font-family: 'Graphik Web', 'Inter', 'SF Pro Display', 'Helvetica', 'Arial', sans-serif;
}

/* CSS değişkenleri */
:root {
    --card-width: 160px;
    --card-height: 240px;
    --masonry-gap: 8px;
    --masonry-columns: 12;
}

.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    overflow: hidden;
    /* Masonry görünümü için grid yerine column-count kullanıyoruz */
    column-count: var(--masonry-columns);
    column-gap: var(--masonry-gap);
    padding: var(--masonry-gap);
    /* Performans için GPU hızlandırma */
    will-change: transform;
    transform: translateZ(0);
    /* Daha iyi performans için */
    contain: layout style paint;
}

/* Mobil cihazlarda masonry sütun sayısını azalt */
@media (max-width: 768px) {
    .hero-grid {
        column-count: 4;
    }
}

@media (max-width: 480px) {
    .hero-grid {
        column-count: 3;
    }
}

/* Gradient overlay'ı güçlendir - mobilde daha iyi görünüm için */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(11, 12, 15, 0.9) 0%, rgba(11, 12, 15, 0.7) 50%, rgba(11, 12, 15, 0.6) 100%);
    z-index: 1;
}

/* Mobil cihazlarda daha güçlü overlay */
@media (max-width: 768px) {
    .gradient-overlay {
        background: linear-gradient(to top, rgba(11, 12, 15, 0.95) 0%, rgba(11, 12, 15, 0.8) 50%, rgba(11, 12, 15, 0.7) 100%);
    }
}

/* Hero içeriği için özel stiller */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Hero içeriği için masaüstü hizalama (sol tarafa) */
.hero-content-wrapper {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

/* Mobil cihazlarda hero içeriğini düzenle */
@media (max-width: 768px) {
    .hero-content {
        min-height: calc(100vh - 80px);
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* Mobilde ortala */
    .hero-content-wrapper {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    /* Mobilde logoları ve butonları ortala */
    .platform-logos, .mobile-btn-wrapper {
        justify-content: center;
    }
}

/* Mobil platform logoları için düzenleme */
.platform-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 480px) {
    .platform-logos {
        gap: 1rem;
        justify-content: center;
    }
    
    .platform-logos img {
        height: 1.5rem;
    }
}

/* Mobil cihazlarda butonları düzenle */
.mobile-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 480px) {
    .mobile-btn-wrapper {
        flex-direction: column;
    }
    
    .mobile-btn-wrapper a {
        width: 100%;
        text-align: center;
    }
}

.movie-card {
    /* Masonry için break-inside: avoid önemli */
    break-inside: avoid;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 6px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 8px; /* Kartlar arası dikey boşluk */
    position: relative;
    perspective: 1000px; /* 3D efekt için perspektif ekle */
    display: inline-block; /* Masonry için gerekli */
    /* Performans için GPU hızlandırma */
    will-change: transform, opacity;
    transform: translateZ(0);
    /* Daha iyi performans için */
    contain: content;
}

.movie-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
    backface-visibility: hidden; /* Flip efekti için gerekli */
    display: block; /* Görüntü altındaki boşluğu kaldırır */
}

/* Kart efektleri */
.movie-card.effect-fade {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.movie-card.effect-fade.show {
    opacity: 1;
}

/* Flip efektleri */
.movie-card.effect-flip-x {
    transform-style: preserve-3d;
}

.movie-card.effect-flip-x img {
    transform: rotateX(180deg);
    opacity: 0;
    transition: transform 0.7s ease-in-out, opacity 0.3s ease;
}

.movie-card.effect-flip-x.show img {
    transform: rotateX(0deg);
    opacity: 1;
}

.movie-card.effect-flip-y {
    transform-style: preserve-3d;
}

.movie-card.effect-flip-y img {
    transform: rotateY(180deg);
    opacity: 0;
    transition: transform 0.7s ease-in-out, opacity 0.3s ease;
}

.movie-card.effect-flip-y.show img {
    transform: rotateY(0deg);
    opacity: 1;
}

.movie-card.effect-zoom-in img {
    transform: scale(1.2);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-zoom-in.show img {
    transform: scale(1);
    opacity: 1;
}

.movie-card.effect-zoom-out img {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-zoom-out.show img {
    transform: scale(1);
    opacity: 1;
}

.movie-card.effect-slide-up img {
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-slide-up.show img {
    transform: translateY(0);
    opacity: 1;
}

.movie-card.effect-slide-down img {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-slide-down.show img {
    transform: translateY(0);
    opacity: 1;
}

.movie-card.effect-slide-left img {
    transform: translateX(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-slide-left.show img {
    transform: translateX(0);
    opacity: 1;
}

.movie-card.effect-slide-right img {
    transform: translateX(-30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-slide-right.show img {
    transform: translateX(0);
    opacity: 1;
}

.movie-card.effect-rotate img {
    transform: rotate(15deg) scale(0.8);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-rotate.show img {
    transform: rotate(0) scale(1);
    opacity: 1;
}

.movie-card.effect-blur img {
    filter: blur(10px);
    opacity: 0;
    transition: filter 0.5s ease, opacity 0.3s ease;
}

.movie-card.effect-blur.show img {
    filter: blur(0);
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(11,12,15,1) 0%, rgba(11,12,15,0.8) 50%, rgba(11,12,15,0.4) 100%);
    z-index: 0;
}

.btn-primary {
    background-color: #50e77f;
    color: #0b0c0f;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #15c975;
}

.module-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.module-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.theme-preview {
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.theme-preview:hover {
    transform: scale(1.03);
}

.fixed-price-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #50e77f;
    color: #0b0c0f;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(80, 231, 127, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
    width: auto;
    max-width: 320px;
}

.fixed-price-container:hover {
    transform: scale(1.05);
}

/* Mobil cihazlar için price-container düzenlemesi */
@media (max-width: 768px) {
    .fixed-price-container {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -4px 20px rgba(80, 231, 127, 0.3);
        padding: 12px 16px;
    }
    
    .fixed-price-container:hover {
        transform: none;
    }
    
    #price-modules-list {
        max-height: 80px;
        font-size: 14px;
    }
    
    #total-price {
        font-size: 18px;
    }
}

/* Daha küçük ekranlar için ek düzenleme */
@media (max-width: 480px) {
    .fixed-price-container {
        padding: 10px 12px;
    }
    
    #price-modules-list {
        max-height: 60px;
    }
    
    #total-price {
        font-size: 16px;
    }
    
    .fixed-price-container .font-bold {
        font-size: 14px;
    }
}

/* Font ağırlıkları için yardımcı sınıflar */
.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Metin keskinliği ve okunabilirlik için */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

p, li {
    letter-spacing: -0.01em;
}

/* Özel kaydırma çubuğu stilleri */
.custom-scrollbar {
    scrollbar-width: thin; /* Firefox için */
    scrollbar-color: #333333 #1a1a1a; /* Firefox için kaydırma çubuğu rengi */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* Kaydırma çubuğu genişliği */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #1a1a1a; /* Kaydırma çubuğu arka plan rengi */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #333333; /* Kaydırma çubuğu rengi */
    border-radius: 3px;
    border: 1px solid #1a1a1a;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #50e77f; /* Hover durumunda kaydırma çubuğu rengi */
}

/* Tab içerik animasyonları */
.theme-content-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.theme-content-animation.active {
    opacity: 1;
    transform: translateY(0);
}

/* Arka plan geçiş animasyonları */
#theme-bg-v1, #theme-bg-v2, #theme-bg-v3, #theme-bg-v6 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

#theme-bg-v1.active, #theme-bg-v2.active, #theme-bg-v3.active, #theme-bg-v6.active {
    opacity: 1;
}

/* Mobil için Tema Sekmeleri İyileştirmeleri */
.theme-tabs-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    position: relative; /* Tab indicator için gerekli */
    padding-bottom: 10px; /* Tab indicator için yer bırak */
}

.theme-tabs-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.theme-tab-btn {
    position: relative;
    transition: all 0.3s ease;
}

/* Eski after pseudoelement tab indicator kaldırıldı */

/* Tema tab indicator stilini güncelle */
#tab-indicator {
    height: 2px; /* Daha belirgin çizgi */
    background-color: #50e77f;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease;
    z-index: 1; /* Kesinlikle en üstte olduğundan emin ol */
}

.theme-tab-btn:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #50e77f;
    transition: width 0.3s ease;
}

.theme-tab-btn.active:after {
    width: 100%;
}

/* Mobil için İçerik Animasyonları */
.theme-content-animation {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tema İçerik Kutusu Mobil İyileştirmesi */
.theme-tab-content {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .theme-tabs-container {
        justify-content: flex-start;
        padding-bottom: 0.5rem;
    }
    
    .theme-tab-btn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    
    .theme-tab-content {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .theme-preview {
        margin-bottom: 1.5rem;
    }
}

/* V6 Premium Tema için Özel Stil */
#v6-content .theme-preview {
    border: 2px solid #50e77f;
}

/* Mobil için Daha Belirgin Tema Sekmeler */
@media (max-width: 640px) {
    .theme-tab-btn.active {
        background-color: rgba(80, 231, 127, 0.1);
        border-radius: 0.25rem;
    }
}

/* =====================================================================
   TEMA VITRINI — mockup cerceveleri
   Cerceveler tamamen CSS ile cizilir; gorsel dosya kullanilmaz
   (retinada bulaniklasmaz, renk degistirilebilir, ek istek yok).
   ===================================================================== */

.theme-stage { position: relative; }

.theme-glow {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 60%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: .12;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* --- Tarayici --- */
.browser-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 860px;
    border: 1px solid #2a2d33;
    border-radius: 12px;
    background: #1a1c21;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: #1a1c21;
    border-bottom: 1px solid #2a2d33;
}

.browser-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: .8;
    flex-shrink: 0;
}

.url-pill {
    flex: 1;
    max-width: 55%;
    margin: 0 auto;
    height: 22px;
    line-height: 22px;
    padding: 0 10px;
    background: #0f1114;
    border-radius: 6px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.browser-screen {
    aspect-ratio: 16 / 10;
    /* contain'den artan bosluk bu zemini gosterir; koyu lacivert
       tema arka planlariyla kaynasir, siyah bant gibi durmaz. */
    background: #14161f;
    overflow: hidden;
}

.browser-screen img {
    width: 100%;
    height: 100%;
    /* contain: sayfanin tamami gorunur, alti kesilmez.
       cover, cerceve oranini tutmayan cekimlerin altini kirpiyordu.
       Artan bosluk ekranin kendi rengiyle kaynasir. */
    object-fit: contain;
    object-position: top center;
    display: block;
}

/* --- Telefon: iPhone 15 Pro --- */
/* Gercek cihaz olculeri 393x852pt (~9/19.5). Genislik 150px'ten
   190px'e cikarildi: icine canli demo gomuldugu icin dar ekranda
   site okunmuyordu. */
.phone-frame {
    position: relative;
    z-index: 2;
    width: 190px;
    aspect-ratio: 393 / 852;
    margin-left: -54px;
    margin-bottom: -22px;
    /* Titanyum kasa: ince cerceve + hafif metalik kenar */
    padding: 5px;
    border-radius: 34px;
    background: linear-gradient(150deg, #3a3d44 0%, #16181d 32%, #101216 68%, #33363c 100%);
    box-shadow:
        0 18px 44px -8px rgba(0, 0, 0, .85),
        inset 0 0 0 1px rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

/* Yan tuslar — kasaya gercekcilik katar */
.phone-frame::before,
.phone-frame::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #2b2e34;
    border-radius: 2px;
    z-index: 1;
}
.phone-frame::before { left: -2px; top: 92px; height: 34px; }   /* ses acma */
.phone-frame::after  { right: -2px; top: 104px; height: 52px; } /* guc tusu */

.phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 29px;
    background: #0b0c0f;
    position: relative;
}

.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* --- Cerceve icine gomulen canli demo ---
   iframe kendi genisliginde render edilip transform ile
   kucultulur; boylece site "mobil gorunum"e degil, gercek
   masaustu/mobil genisligine gore acilir. Etkilesim kapali:
   sahne bir vitrindir, ziyaretci yanlislikla gomulu sitede
   gezinmemeli. */
.stage-embed {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    display: block;
    transform-origin: top left;
    pointer-events: none;
    background: #14161f;
}

/* Tarayici ekrani: 1440px genisligindeki sayfayi cerceveye sigdir.
   Olcek SABIT DEGIL: cerceve responsive oldugu icin (max-width 860px
   ama dar ekranda daralir) kendi genisligine gore hesaplanir.
   Sabit deger kullanilsaydi 1024px alti ekranlarda iframe tasardi. */
.browser-screen {
    position: relative;
}

.browser-screen .stage-embed {
    /* Full HD monitorde acilmis gibi gorunsun: site 1920px genislikte
       render edilip cerceveye kadar kucultulur. Boylece "dar pencere"
       sanip mobil duzene dusmez, masaustu tasarimi gorunur.
       2560px denendi ama icerik fazla uzaktan gorunuyordu.

       DIKKAT: scale(calc(100cqw / 1920)) CALISMAZ — scale() birimsiz
       sayi bekler, calc() ise uzunluk dondurur. Olcek bu yuzden
       stage-embed.js icinde hesaplanip degiskene yazilir. */
    width: 1920px;
    height: 1200px;
    transform: scale(var(--stage-scale, 0.4469));
}

/* Telefon ekrani: 393px mantiksal genislik (iPhone 15 Pro) */
.phone-screen .stage-embed {
    width: 393px;
    height: 852px;
    transform: scale(var(--phone-scale, 0.4580));
}

/* Container query desteklemeyen eski tarayicilar icin geri donus:
   sabit olcek, en yaygin genislige (858px) gore. */


/* --- Gorsel yokken: soyut site iskeleti --- */
.skeleton {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    background: #0b0c0f;
}

.sk-header { display: flex; align-items: center; gap: 8px; }

.sk-logo {
    width: 46px;
    height: 9px;
    border-radius: 3px;
    background: var(--accent);
    opacity: .5;
}

.sk-menu {
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .07);
}

.sk-hero {
    height: 28%;
    border-radius: 6px;
    background: linear-gradient(120deg, rgba(255,255,255,.06), var(--accent));
    opacity: .18;
}

.sk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    flex: 1;
}

.skeleton-mobile .sk-grid { grid-template-columns: repeat(2, 1fr); }

.sk-card {
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
}

/* --- Alt serit (tema secici) --- */
.theme-price-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.theme-price-legend span {
    padding: 7px 11px;
    border: 1px solid #2a2d33;
    border-radius: 999px;
    background: rgba(17, 18, 21, .8);
    color: #c7cbd1;
    font-size: 12px;
    font-weight: 600;
}

.theme-price-legend span:first-child { color: #50e77f; border-color: rgba(80, 231, 127, .28); }

.theme-purchase-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px;
    border: 1px solid #292c32;
    border-radius: 14px;
    background: rgba(17, 18, 21, .86);
}

.theme-price-copy { min-width: 178px; text-align: left; }
.theme-price-badge {
    display: table;
    margin-bottom: 4px;
    color: #aeb4bd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}
.theme-price-badge.is-free { color: #50e77f; }
.theme-price-value { display: block; color: #fff; font-size: 28px; font-weight: 800; line-height: 1.1; }
.theme-price-note { display: block; margin-top: 3px; color: #7f8792; font-size: 11px; }
.theme-purchase-actions { display: flex; gap: 10px; align-items: center; }

.theme-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
}

.theme-chip {
    flex-shrink: 0;
    min-width: 92px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #2a2d33;
    background: #111215;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}

.theme-chip-name, .theme-chip-price { display: block; }
.theme-chip-name { font-size: 13px; }
.theme-chip-price { margin-top: 2px; color: #9ca3af; font-size: 10px; font-weight: 700; }
.theme-chip-price.is-free { color: #50e77f; }

.theme-chip:hover { border-color: #4b5563; color: #e5e7eb; }

.theme-chip[aria-selected="true"] {
    border-color: var(--chip-accent, #50e77f);
    color: #fff;
    background: #17191d;
}

@media (max-width: 768px) {
    .phone-frame { display: none; }
    .browser-frame { max-width: 100%; }
    .theme-purchase-panel { width: 100%; flex-direction: column; gap: 12px; }
    .theme-price-copy { min-width: 0; text-align: center; }
    .theme-price-badge { margin-left: auto; margin-right: auto; }
    .theme-purchase-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
}


/* =====================================================================
   BOLUM AYIRICI (divider)
   Iki yandan merkeze akan ince isik cizgileri; ortada egik cizgi grubu.
   ===================================================================== */

.section-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* Merkeze dogru parlayan yatay cizgiler */
.section-divider::before,
.section-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: calc(50% - 26px);
    transform: translateY(-50%);
}

.section-divider::before {
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(80, 231, 127, .45));
}

.section-divider::after {
    right: 0;
    background: linear-gradient(270deg, transparent, rgba(80, 231, 127, .45));
}

/* Ortadaki egik cizgi grubu */
.divider-mark {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}

.divider-mark .slash {
    display: block;
    width: 2px;
    height: 16px;
    border-radius: 1px;
    transform: skewX(-20deg);
}

/* Ortadaki cizgi daha uzun ve parlak — merkez vurgusu */
.divider-mark .slash-1 { background: #50e77f; opacity: .45; }
.divider-mark .slash-2 { background: #50e77f; height: 22px; box-shadow: 0 0 12px rgba(80, 231, 127, .7); }
.divider-mark .slash-3 { background: #50e77f; opacity: .45; }

@media (max-width: 640px) {
    .section-divider { padding: 1.25rem 0; }
    .divider-mark .slash { height: 12px; }
    .divider-mark .slash-2 { height: 17px; }
}

/* --- Urun detay makalesi -------------------------------------
   Panelden girilen zengin metin (|rich) burada bicimlenir.
   Tailwind typography eklentisi projede yok; okunakli bir
   makale duzeni icin gereken kurallar elle tanimlandi. */
.article {
    color: #c9ced6;
    font-size: 15.5px;
    line-height: 1.85;
    /* Uzun satirlar okumayi zorlastirir: olcu ~75 karakter. */
    max-width: 70ch;
}

.article > *:first-child { margin-top: 0; }
.article > *:last-child  { margin-bottom: 0; }

.article p { margin: 0 0 1.15em; }

.article h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 2.2em 0 .7em;
    padding-bottom: .4em;
    border-bottom: 1px solid #23262c;
}

.article h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 1.9em 0 .5em;
}

.article h4 {
    color: #e6e9ee;
    font-size: 15.5px;
    font-weight: 600;
    margin: 1.5em 0 .4em;
}

.article strong, .article b { color: #ffffff; font-weight: 600; }
.article em, .article i     { color: #dfe3e9; }

.article ul, .article ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.article li { margin-bottom: .5em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li::marker { color: #50e77f; }

.article blockquote {
    margin: 1.6em 0;
    padding: .9em 1.2em;
    border-left: 3px solid #50e77f;
    background: #111318;
    border-radius: 0 8px 8px 0;
    color: #d7dbe2;
}
.article blockquote p:last-child { margin-bottom: 0; }

.article a {
    color: #50e77f;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article a:hover { color: #7af0a3; }

@media (max-width: 640px) {
    .article    { font-size: 15px; line-height: 1.8; }
    .article h2 { font-size: 21px; }
    .article h3 { font-size: 17px; }
}

/* --- Yetiskin tema demolari: yas onayi katmani ---------------
   Onay verilene kadar embed'in uzerini kapatir. iframe'in src'si
   zaten bos oldugu icin katman gorsel bir perde degil, gercek bir
   engeldir: onaysiz hicbir istek gitmez. */
.age-gate {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    background:
        radial-gradient(circle at 50% 40%, rgba(225, 29, 72, .14), transparent 65%),
        rgba(8, 9, 12, .96);
    backdrop-filter: blur(3px);
}

.age-gate__box { max-width: 320px; }

.age-gate__badge {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

.age-gate__title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.age-gate__text {
    margin: 0 0 14px;
    color: #9ca3af;
    font-size: 12.5px;
    line-height: 1.6;
}

.age-gate__btn {
    display: inline-block;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: #50e77f;
    color: #0b0c0f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s ease;
}

.age-gate__btn:hover { opacity: .9; }

.age-gate__alt {
    display: block;
    margin-top: 10px;
    color: #6b7280;
    font-size: 11.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.age-gate__alt:hover { color: #9ca3af; }

/* Telefon cercevesi dar: metinler kuculur, uzun aciklama gizlenir. */
.age-gate--phone { padding: 8px; }
.age-gate--phone .age-gate__text { display: none; }
.age-gate--phone .age-gate__title { font-size: 12.5px; line-height: 1.35; }
.age-gate--phone .age-gate__badge { font-size: 10px; padding: 2px 8px; margin-bottom: 8px; }
.age-gate--phone .age-gate__btn { padding: 7px 10px; font-size: 10.5px; }
.age-gate--phone .age-gate__alt { font-size: 10px; }

/* Onaylandi: katman kaldirilir. */
.age-gate[hidden] { display: none; }