/* --- TASARIM DEĞİŞKENLERİ --- */
/* Sitede sık kullanılan renk ve şeffaflık değerlerini buradan tek seferde yönetiriz */
:root { 
    --nav-bg: rgba(255, 255, 255, 0.8); /* Menü arka plan şeffaflığı */
    --accent: #6366f1;                   /* Ana vurgu rengi (İndigo Mavi) */
}

/* --- GENEL SAYFA AYARLARI --- */
/* Font seçimi ve metin kopyalamayı engelleme özellikleri */
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* --- MODERN MENÜ (NAVBAR) --- */
/* Buzlu cam efekti ve geçiş animasyonlarını içeren ana menü çubuğu */
.modern-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- LOGO TASARIMI --- */
/* Sol üstteki logonun boyutu ve harf arası mesafe ayarı */
.navbar-brand { 
    font-size: 1.5rem; 
    letter-spacing: -1px; 
}

/* --- MENÜ LİNKLERİ --- */
/* Linklerin yazı kalınlığı, boşlukları ve duruş pozisyonu */
.nav-link {
    color: #475569 !important;
    font-weight: 600;
    padding: 0.5rem 1.2rem !important;
    position: relative;
    transition: color 0.3s ease;
}

/* --- LİNK ETKİLEŞİMİ --- */
/* Fareyle linkin üzerine gelindiğinde renk değişimi */
.nav-link:hover { 
    color: var(--accent) !important; 
}

/* --- LİNK ALT ÇİZGİ ANİMASYONU --- */
/* Menü linklerinin altına başlangıçta gizli olan, merkezden açılan bir çizgi ekler */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* Fareyle üzerine gelince çizgi %60 genişliğe ulaşarak belirir */
.nav-link:hover::after { 
    width: 60%; 
}

/* --- SEPET VE KULLANICI BUTONLARI --- */
/* Sepet butonu: Sade, gri çerçeveli ve üzerine gelince hafifçe yukarı zıplayan yapı */
.cart-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: 0.3s;
}

.cart-btn:hover { 
    background: #f1f5f9; 
    transform: translateY(-2px); 
}

/* Kullanıcı butonu: Ana vurgu renginde (Indigo), gölgeli ve dikkat çekici */
.user-btn {
    background: var(--accent);
    color: white !important;
    border-radius: 12px;
    padding: 10px 20px !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* Premium Buton: Koyu temalı, daha büyük ve profesyonel geçişli buton */
.btn-premium { 
    background: var(--dark-bg, #1e293b); /* Değişken yoksa koyu gri kullanır */
    color: white; 
    border-radius: 15px; 
    padding: 15px 30px; 
    font-weight: 600; 
    transition: 0.3s; 
    text-decoration: none; 
    border: none; 
}

.btn-premium:hover { 
    background: var(--accent); 
    color: white; 
    transform: translateY(-3px); 
}

/* --- TASARIM VE FİYAT KARTLARI --- */
/* Design Card: Görsel ağırlıklı, üzerine gelince yükselen ve içindeki resmi zoom yapan kart */
.design-card { 
    border: none; 
    border-radius: 20px; 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
}

.design-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

.image-wrapper { position: relative; overflow: hidden; height: 220px; }
.design-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.design-card:hover img { transform: scale(1.1); }

/* Price Card: Fiyat paketlerini gösteren, 'Featured' olanı vurgulayan kartlar */
.price-card { 
    border: 2px solid #f1f5f9; 
    border-radius: 24px; 
    padding: 30px; 
    transition: 0.3s; 
    background: white; 
}

.price-card.featured { 
    border-color: var(--accent); 
    background: #fdfdff; 
    position: relative; 
}

.featured-badge { 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: var(--accent); 
    color: white; 
    padding: 4px 15px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
}

/* --- MÜŞTERİ YORUMLARI VE DEKORATİF ÖGELER --- */
/* Testimonial Card: Müşteri yorumları için sol tarafı renkli çizgili kutu */
.testimonial-card { 
    background: #fff; 
    border-radius: 20px; 
    padding: 25px; 
    border-left: 5px solid var(--accent); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.02); 
}

.user-avatar { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: #e2e8f0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    color: var(--accent); 
}

/* Dots Pattern: Arka planda duran şık noktalı dekorasyon motifi */
.dots-pattern {
    position: absolute;
    top: -10%; left: -10%;
    width: 100%; height: 100%;
    background-image: radial-gradient(#6366f1 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    opacity: 0.1;
    z-index: -1;
}

/* Mockup Img: 3D efektleri için hazırlanmış görsel taşıyıcı */
.mockup-img {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: inline-block;
}

/* --- 3D GÖRSEL ETKİLEŞİMİ --- */
/* Mockup görseline fareyle gelindiğinde hafif bir yan yatma (3D) ve derinlik hissi veren gölge ekler */
.mockup-img:hover {
    transform: rotateY(10deg) rotateX(2deg) scale(1.05) !important;
    filter: drop-shadow(30px 30px 60px rgba(0,0,0,0.2)) !important;
}

/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */
/* Tablet ve telefonlarda menüyü tam beyaz yapar ve karmaşayı önlemek için alt çizgi animasyonunu kapatır */
@media (max-width: 991px) {
    .modern-nav { background: white; }
    .nav-link::after { display: none; } 
}

/* --- HERO (GİRİŞ) VE SAYFA AYARLARI --- */
/* Sayfanın en üst alanı için şık bir gradyan arka plan ve yumuşak kaydırma özelliği */
.hero-wrapper {
    background: linear-gradient(to right, #ffffff 50%, #f8fafc 100%);
}

html {
    scroll-behavior: smooth; /* Menüye tıklandığında ilgili bölüme yumuşakça kayar */
}

/* --- SERVİS KARTLARI VE İKONLAR --- */
/* Hizmetlerin anlatıldığı kartlar üzerine gelince yükselir ve ikonu belirlediğin indigo rengine döner */
.service-card {
    border-radius: 12px;
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

.icon-circle {
    min-width: 65px;
    height: 65px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.service-card:hover .icon-circle {
    background-color: #6366f1 !important;
    color: white !important;
}

/* --- OTOMATİK MARKA SLIDERI --- */
/* Logoların sürekli soldan sağa kaymasını sağlar. Logolar başta siyah-beyazdır, üzerine gelince renklenir. */
.brand-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.brand-track {
    display: flex;
    width: max-content;
    animation: scrollLogos 25s linear infinite; /* Kesintisiz döngü animasyonu */
}

.brand-item img {
    max-width: 120px;
    max-height: 50px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
}

.brand-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Logoların kayma mesafesini belirleyen animasyon adımları */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-180px * 6)); }
}

/* --- SOSYAL MEDYA / YARDIMCI BUTONLAR --- */
/* Tam yuvarlak, küçük ve şık ikon butonları oluşturur */
.btn-outline-secondary.rounded-circle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: 0.3s;
}

/* --- SOSYAL MEDYA ETKİLEŞİMİ --- */
/* Yuvarlak sosyal medya butonlarının üzerine gelince markanın ana rengine (indigo) bürünmesini ve hafifçe yukarı zıplamasını sağlar. */
.btn-outline-secondary.rounded-circle:hover {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
    transform: translateY(-3px);
}

/* --- DESTEK ALANI İKON ANİMASYONU --- */
/* Destek bölümündeki ikonun (örneğin bir kulaklık veya mesaj ikonu) üzerine gelindiğinde dikkat çekmesi için yukarı doğru küçük bir hareket yapmasını sağlar. */
.support-icon-box i {
    transition: transform 0.3s ease;
    display: inline-block;
}

.support-icon-box:hover i {
    transform: translateY(-5px);
}

/* --- TİPOGRAFİ YARDIMCILARI --- */
/* Standart kalınlıklardan daha baskın bir yazı tipi (800) ve çok küçük metinler (0.75rem) için ek sınıflar. */
.fw-extrabold { font-weight: 800; }
.x-small { font-size: 0.75rem; }

/* --- MOBİL GÖRÜNÜM DÜZELTMESİ (768px Altı) --- */
/* Yan yana duran elemanlar mobilde alt alta geldiğinde, aradaki dikey çizgilerin (border-start) kötü görünmesini engellemek için çizgileri kaldırır. */
@media (max-width: 768px) {
    .support-cta .border-start {
        border: none !important;
    }
}

/* --- DESTEK VE İLETİŞİM ALANI --- */
/* Arka planı koyu lacivert yaparak içeriği öne çıkarır ve taşmaları engeller */
.support-section {
    background: #0f172a;
    position: relative;
    overflow: hidden;
}

/* 7/24 Aktif Rozeti: Şeffaf mavi bir kutu içinde küçük ve dikkat çekici bilgi etiketi */
.support-badge {
    background: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
}

/* Canlı/Aktif Durum Işığı: Yanıp sönen animasyonlu küçük nokta (mavi ve yeşil versiyonlar) */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Küçük İletişim Kartları: Hover durumunda yukarı kayan, şeffaf cam görünümlü mini butonlar */
.contact-mini-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.contact-mini-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(10px);
}

/* Renk Geçişli Başlık: Metne gradyan renk vererek modern bir görünüm sağlar */
.text-info-gradient {
    background: linear-gradient(90deg, #0dcaf0, #0d6efd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- EKSTRA BİLEŞENLER --- */
/* Çerez Barı: Sayfanın en altına sabitlenen, kullanıcıyı rahatsız etmeyen beyaz çubuk */
.cookie-bottom-bar {
    position: fixed;
    bottom: 0; 
    left: 0; 
    right: 0;
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 15px 0;
    z-index: 999999 !important; /* En ön katmana alır */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); /* Yukarı doğru gölge verir */
}

/* Dijital Mühür/Onay Damgası: Yeşil, eğik ve çift çerçeveli retro mühür görünümü */
.digital-stamp {
    border: 3px double #198754 !important;
    color: #198754 !important;
    transform: rotate(-10deg) !important;
    font-weight: 800;
}

/* Sayfa Üst Bandı: Alt sayfalar için başlık ve navigasyon alanı */
.page-banner {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- TAB VE GALERİ AYARLARI --- */
/* Nav-Pills: Sekmelerin sabit boyutlu, gradyan geçişli ve zıplamayan hali */
.nav-pills .nav-link {
    height: 40px !important;
    min-width: 120px !important;
    transition: background 0.2s ease !important;
}

/* Küçük Resimler (Thumbnails): Galeri için üzerine gelince netleşen ve çerçevelenen resimler */
.thumb-img {
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.thumb-img:hover, .thumb-img.active {
    border-color: #6366f1;
    opacity: 1;
}

/* --- GENEL DÜZENLEYİCİLER --- */
/* Hover İptali: Bazı özel alanlarda animasyonları devre dışı bırakmak için kullanılır */
.card.no-hover:hover {
    transform: none !important;
}