/* === Premium Theme Layer === */
:root{
  --bg:#ffffff;            /* fildişi arka plan */
  --bg-soft:#EFEBE2;       /* yumuşak ten */
  --surface:#FFFFFF;
  --ink:#16284A;           /* derin lacivert */
  --ink-soft:#33425C;
  --muted:#8A8676;         /* warm grey */
  --hairline:#E6E0D4;      /* warm border */
  --accent:#1F3B73;        /* pastel lacivert vurgu */
  --accent-dark:#16284A;
  --gold:#C9A961;          /* soft altın */
  --teal:#0E7C7B;          /* kurumsal teal */
  --danger:#B23B3B;
  --success:#0F7A5A;
  --radius:18px;
  --shadow-sm:0 6px 16px -10px rgba(22,40,74,.18);
  --shadow-md:0 18px 50px -28px rgba(22,40,74,.22);
  --shadow-lg:0 30px 80px -30px rgba(22,40,74,.28);
  --easing:cubic-bezier(.2,.7,.2,1);
}

html,body{background:var(--bg);min-height:100%}
body{background-image:radial-gradient(1200px 600px at 80% -10%,rgba(201,169,97,.10),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(31,59,115,.08),transparent 55%);background-attachment:fixed}

.page-shell{padding:34px 0 60px}

/* Page header */
.page-header-premium{max-width:980px;margin:0 auto 22px}
.page-title{font-size:34px;line-height:1.15;margin:0 0 6px;letter-spacing:-.015em}
.page-title::after{content:"";display:block;width:46px;height:3px;background:linear-gradient(90deg,var(--ink),var(--gold));border-radius:3px;margin-top:14px}
.page-subtitle{color:var(--muted);font-size:14.5px;letter-spacing:.02em;margin:0}

/* Card premium */
.card-premium{background:linear-gradient(180deg,#fff,#FDFBF6);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-md);transition:transform .4s var(--easing),box-shadow .4s var(--easing),opacity .5s ease}
.card-premium:hover{box-shadow:var(--shadow-lg)}
.card-section-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;color:var(--ink);margin:-4px 0 18px;display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.card-section-title i{color:var(--gold);font-size:16px}
.card-table{padding:0;overflow:hidden}
.card-table .table-responsive{overflow-x:auto}
.card-table .table{margin:0}
.card-table .table thead th{background:linear-gradient(180deg,#FBF8F1,#F4EFE3);padding:16px 18px}
.card-table .table tbody td{padding:16px 18px}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--easing),transform .7s var(--easing)}
.reveal.is-visible{opacity:1;transform:none}

/* Forms premium polish */
.form-group.is-focused .control-label{color:var(--accent)}
.has-icon{position:relative}
.has-icon .input-icon{position:absolute;left:16px;top:42px;color:var(--muted);font-size:14px;pointer-events:none;transition:color .2s ease}

/* DÜZELTME: İkon kaldırıldığı için sol boşluğu normal düzeye (14px) çektik ve sola hizaladık */
.has-icon .form-control,
.form-control {
    padding-left: none;
    text-align: left !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* YENİ: Giriş alanlarına tıklayınca (Focus) görseldeki mavi parlamayı ekler */
.form-control:focus {
    border-color: #5dade2 !important;
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.2) !important;
    outline: none;
}

.has-icon.is-focused .input-icon,.has-icon .form-control:focus + .input-icon{color:var(--accent)}
.forgot-password{position:absolute;right:0;top:0;font-size:12.5px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.forgot-password:hover{color:var(--accent)}
.form-group__password{position:relative}

/* Checkbox premium */
.checkbox-premium label{font-size:13.5px}
.checkbox-premium input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--hairline);border-radius:5px;background:#fff;display:inline-block;position:relative;cursor:pointer;transition:all .2s ease;margin-top:2px;flex-shrink:0}
.checkbox-premium input[type="checkbox"]:checked{background:var(--ink);border-color:var(--ink)}
.checkbox-premium input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Auth shell */
.auth-shell{padding:0px 0}
.auth-footer-text{display:block;text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px}
.auth-footer-text a{color:var(--accent);font-weight:600}

/* Status pills */
.status-pill{display:inline-block;padding:5px 11px;font-size:12px;font-weight:600;letter-spacing:.04em;border-radius:999px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--hairline)}
.status-pill.status-completed,.status-pill[class*="completed"]{background:#E6F4EE;color:#0F5E47;border-color:#BFE2D2}
.status-pill.status-pending,.status-pill[class*="pending"]{background:#FBF3E0;color:#7A5A12;border-color:#F0E0B2}
.status-pill.status-inprogress,.status-pill[class*="progress"]{background:#E8F0FB;color:#1F3A6E;border-color:#CBD9F1}
.status-pill.status-canceled,.status-pill[class*="cancel"]{background:#FBECEC;color:#9B1C1C;border-color:#F2CFCF}

/* Price pill */
.price-pill{display:inline-block;padding:4px 10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);background:linear-gradient(135deg,#FBF3E0,#F4EAD0);border:1px solid #EAD9A8;border-radius:8px;font-size:13.5px;letter-spacing:.01em}

/* Service id */
.service-id{display:inline-block;padding:3px 9px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent);background:#EEF2FB;border-radius:7px}

/* Services table category row */
/* font-family kısmını modern düz yazı (sans-serif) tipine çektik */
.category-row td {
    background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
}
.category-row td strong{color:#fff;font-weight:600}
.service-name{font-weight:500;color:var(--ink)}
.service-description{background:var(--bg-soft);color:var(--ink-soft);font-size:13.5px;border-radius:0!important}

/* Description panel (neworder) */
.description-panel{background:var(--bg-soft);border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;color:var(--ink-soft);font-size:14px;line-height:1.55}
.charge-field {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important; /* Diğer input alanlarıyla uyumlu olması için 18px'den 16px'e çektik */
    font-weight: 600;
    color: var(--ink) !important;
    background: linear-gradient(135deg,#FBF3E0,#FDFBF6) !important;
    border-color: #EAD9A8 !important;
};font-weight:600;color:var(--ink)!important;background:linear-gradient(135deg,#FBF3E0,#FDFBF6)!important;border-color:#EAD9A8!important}
.mono-textarea{font-family:'JetBrains Mono','Menlo',monospace;font-size:13.5px;line-height:1.6}

/* Alert premium accent */
.alert-premium{border-left:px solid #0865b2;background:linear-gradient(180deg,#FBF8F1,#FFFFFF);color:var(--ink-soft);border-radius:14px}
.alert-premium strong{color:var(--ink)}

/* Tickets */
.titcket-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.ticket-message-block{margin-bottom:18px}
.ticket-message{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--hairline);box-shadow:var(--shadow-sm);font-size:14.5px;line-height:1.6;color:var(--ink-soft);position:relative}
.ticket-message-user{background:linear-gradient(135deg,var(--ink),var(--accent));color:#fff;border-color:transparent;border-top-right-radius:4px}
.ticket-message-user .message{color:#fff}
.ticket-message-support{background:#FDFBF6;border-top-left-radius:4px}
.ticket-message-right .info{margin-top:6px;color:var(--muted);font-size:12.5px}
.ticket-message-left .info{margin-top:6px;color:var(--muted);font-size:12.5px}
.ticket-files{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.25)}
.ticket-message-support .ticket-files{border-top-color:var(--hairline)}
.ticket-files a{color:inherit;font-size:13px;display:inline-flex;align-items:center;gap:6px;opacity:.9}
.ticket-files a:hover{opacity:1}
.badge-new{background:var(--gold);color:#fff;font-size:10px;padding:3px 7px;border-radius:6px;margin-left:6px;letter-spacing:.06em;font-weight:700}

/* Muted */
.muted-text{color:var(--muted);font-size:13.5px}

/* RTL */
.rtl-navbar,.rtl-form,.rtl-content,.rtl-table,.rtl-alert,.rtl-nav,.rtl-pagination,.rtl-search{direction:rtl;text-align:right}
.rtl-form .has-icon .input-icon{left:auto;right:16px}
.rtl-form .has-icon .form-control{padding-left:16px;padding-right:44px}
.rtl-form .forgot-password{left:0;right:auto}

/* Order action group */
.order-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* Misc */
.panel-border-top{padding-top:18px;border-top:1px solid var(--hairline);margin-top:18px}

/* Responsive */
@media (max-width:991px){
  .page-title{font-size:28px}
  .well{padding:22px}
}
@media (max-width:600px){
  .page-shell{padding:22px 0 40px}
  .page-title{font-size:24px}
  .auth-title{font-size:26px}
  .nav-pills{gap:6px}
  .nav-pills > li > a{padding:8px 12px;font-size:13px}
  .btn-block-lg,.btn-lg-cta{width:100%}
  .ticket-message-right .col-md-1,.ticket-message-left .col-md-1{display:none}
  .navbar-brand{font-size:18px;padding:14px}
}

/* Selection */
::selection{background:var(--ink);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Genel Header Kapsayıcısı */
.auth-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 20px 24px 10px 24px;
    text-align: left;
    background-color: transparent;
}

/* "Welcome to Smm Vio !" Başlığı */
.auth-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a2a3a;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    display: inline-block;
}

/* Başlığın Altındaki Gradient Çizgi */
.auth-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #112233 0%, #1a3a5f 40%, #c9a054 100%);
    margin-top: 12px;
    border-radius: 2px;
}

/* "Enter your information..." Alt Başlığı */
.auth-subtitle {
    font-size: 15px;
    color: #8a96a3;
    margin: 16px 0 0 0;
    font-weight: 400;
    line-height: 1.4;
}
/* ==========================================================================
   PREMIUM NAVBAR STYLES 
   ========================================================================== */

.premium-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: 14px 24px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px); /* Modern cam efekti */
    -webkit-backdrop-filter: blur(8px);
}

.navbar-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Alanı */
.navbar-brand {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: opacity 0.2s ease;
}

.navbar-brand span {
    color: var(--gold); /* .com kısmını altın sarısı yapar */
}

.navbar-brand:hover {
    opacity: 0.9;
}

/* Menü Linkleri */
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-menu a {
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding: 6px 0;
    transition: color 0.2s ease;
}

/* Linklerin altındaki şık çizgi efekti */
.navbar-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s var(--easing);
}

.navbar-menu a:hover,
.navbar-menu a.active {
    color: var(--ink);
}

.navbar-menu a:hover::after,
.navbar-menu a.active::after {
    width: 100%;
}

/* Menüdeki Sağ Buton (Örn: Giriş Yap / Kayıt Ol) */
.nav-btn {
    background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
    color: #fff !important;
    padding: 8px 18px !important;
    border-radius: 10px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.nav-btn::after {
    display: none !important; /* Buton linkinde alt çizgi çıkmasın */
}

/* Mobil Uyum (Responsive) */
@media (max-width: 768px) {
    .premium-navbar {
        padding: 12px 20px;
    }
    
    .navbar-menu {
        display: none; /* Mobil menü açılır-kapanır JS yapın yoksa burayı basit bir dikey menüye çevirebiliriz */
    }
}
.navbar-brand img {
    display: inline-block;
    max-width: 100%;
    max-height: 51px;
    margin-top: -17px; /* Masaüstünde hizalamayı korur */
    vertical-align: middle;
}
/* ==========================================================================
   HYBRID SERVICES RESPONSIVE LAYER
   ========================================================================== */

/* Varsayılan olarak mobil görünümü gizle (Masaüstünde görünmesin) */
.visible-xs-premium {
    display: none !important;
}

/* Mobil Ekranlar İçin Kurallar (768px altı) */
@media (max-width: 768px) {
    /* Masaüstü tablosunu komple görünmez yap */
    .hidden-xs-premium {
        display: none !important;
    }
    
    /* Mobil kart yapısını görünür kıl */
    .visible-xs-premium {
        display: block !important;
    }
    
    /* Mobil Kategori Başlıkları (Örn: Instagram Takipçi) */
    .mobile-category-title {
        background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
        color: #ffffff !important;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        margin: 24px 0 14px 0;
        box-shadow: var(--shadow-sm);
    }
    
    /* Bağımsız Servis Kartı Tasarımı */
    .mobile-service-card {
        background: #ffffff !important;
        border: 1px solid var(--hairline) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 14px !important;
        box-shadow: var(--shadow-sm) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    /* Kartın Başlık Alanı (#ID ve Servis Adı) */
    .m-service-header {
        border-bottom: 1px solid var(--hairline);
        padding-bottom: 10px;
        margin-bottom: 12px;
    }
    
    .m-service-id {
        display: inline-block;
        padding: 3px 8px;
        font-size: 11px;
        font-weight: 700;
        color: var(--accent);
        background: #eef2fb;
        border-radius: 6px;
        margin-bottom: 6px;
    }
    
    .m-service-name {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.4;
    }
    
    /* Veri Satırları (Fiyat, Min, Max yan yana kilitlenir) */
    .m-data-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0;
        border-bottom: 1px dashed rgba(230, 224, 212, 0.5);
    }
    
    .m-data-row:last-of-type {
        border-bottom: none;
    }
    
    .m-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
    }
    
    .m-val {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-soft);
    }
    
    /* Açıklama Kutusu */
    .m-service-desc {
        background: var(--bg-soft);
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 12.5px;
        color: var(--ink-soft);
        margin-top: 10px;
        line-height: 1.5;
    }
}
/* Uyarı kutusunun sağ üstündeki çarpıyı tamamen gizler */
.alert .close,
.alert .btn-close,
.alert [data-dismiss="alert"],
.alert [data-bs-dismiss="alert"] {
    display: none !important;
    pointer-events: none !important;
}
/* ==========================================================================
   TICKET MESSAGES TEXT COLOR FIX
   ========================================================================== */

/* 1. Destek Ekibinin Mesaj Alanı (Arka planı krem/beyaz olan kutu) */
.ticket-message-support,
.ticket-message-support .message,
.ticket-message-left .ticket-message {
    color: var(--ink) !important; /* Yazıları okunaklı koyu lacivert yapar */
    background-color: #FDFBF6 !important; /* Arka plan rengini sabitler */
}

/* 2. Kullanıcının Kendi Attığı Mesaj Alanı (Arka planı koyu lacivert olan kutu) */
.ticket-message-user,
.ticket-message-user .message,
.ticket-message-right .ticket-message {
    color: #ffffff !important; /* Koyu arka planda yazıların beyaz kalmasını sağlar */
    background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
}

/* 3. Genel olarak mesaj içindeki düz metinlerin rengini garantiye alalım */
.ticket-message, 
.ticket-message p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}
/* ==========================================================================
   FINAL SERVICES HYBRID RESPONSIVE LAYER (CENTERED & COLLAPSIBLE EVERYWHERE)
   ========================================================================== */

/* Varsayılan gizleme kuralları */
.visible-xs-premium { display: none !important; }

/* --------------------------------------------------------------------------
   A. MASAÜSTÜ GÖRÜNÜM AYARLARI (769px ve Üzeri Ekranlar)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .hidden-xs-premium { display: block !important; }
    
    /* SOLA YAPARIŞIKLIĞI ÇÖZEN VE TABLOYU TAM ORTALAYAN ALAN */
    .card-table.hidden-xs-premium {
        max-width: 1020px !important;
        margin-left: auto !important;  /* Sol boşluğu otomatik vererek ortalar */
        margin-right: auto !important; /* Sağ boşluğu otomatik vererek ortalar */
        margin-top: 0px !important;
        margin-bottom: 40px !important;
        float: none !important;        /* Eğer float varsa sola çekmesini engeller */
        clear: both !important;
        border: 1px solid var(--hairline) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .table-premium thead th {
        background: linear-gradient(180deg, #FBF8F1, #F4EFE3) !important;
        padding: 16px !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--ink) !important;
    }

    .table-premium tbody td {
        padding: 14px 16px !important;
        vertical-align: middle !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 14px !important;
    }

    .desc-collapse-row td { padding: 0 !important; border-top: none !important; }
    
    .web-description-box {
        background: #fdfbf6 !important;
        border-bottom: 1px solid var(--hairline) !important;
        padding: 16px 24px !important;
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        color: var(--ink-soft) !important;
        text-align: left !important;
    }
    .web-description-box strong { color: var(--gold); display: block; margin-bottom: 4px; }
    .web-description-box p { margin: 0 !important; white-space: pre-line !important; }
}

/* GENEL BUTON TASARIMI (Hem Web Hem Mobil Kullanır) */
.btn-desc-trigger {
    background: #f4efe3 !important;
    color: var(--ink) !important;
    border: 1px solid var(--hairline) !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}
.btn-desc-trigger:hover, 
.btn-desc-trigger[aria-expanded="true"] {
    background: var(--ink) !important;
    color: #ffffff !important;
    border-color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   B. MOBİL GÖRÜNÜM AYARLARI (768px ve Altı Ekranlar)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hidden-xs-premium { display: none !important; }
    .visible-xs-premium { display: block !important; }
    
    .mobile-category-title {
        background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
        color: #ffffff !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        padding: 14px 16px;
        font-size: 14.5px;
        font-weight: 600;
        border-radius: 12px;
        margin: 24px 0 14px 0;
        box-shadow: var(--shadow-sm);
    }
    
    .mobile-service-card {
        background: #ffffff !important;
        border: 1px solid var(--hairline) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 14px !important;
        box-shadow: var(--shadow-sm) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    .m-service-header { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-bottom: 12px; }
    .m-service-id { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 700; color: var(--accent); background: #eef2fb; border-radius: 6px; margin-bottom: 6px; }
    .m-service-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
    
    .m-data-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0;
        border-bottom: 1px dashed rgba(230, 224, 212, 0.5);
    }
    .m-data-row:last-of-type { border-bottom: none; }
    .m-label { font-size: 13px; font-weight: 600; color: var(--muted); }
    .m-val { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
    
    /* Mobil Buton Sarmalı ve Blok Buton Yapısı */
    .m-desc-btn-wrapper { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; }
    .m-btn-block { width: 100% !important; display: block !important; text-align: center !important; padding: 8px !important; }

    /* Mobilde Butona Basınca Açılan Açıklama Kutusu */
    .m-service-desc {
        background: var(--bg-soft) !important;
        padding: 12px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
        color: var(--ink-soft) !important;
        margin-top: 8px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
    .m-service-desc strong { color: var(--gold); display: block; margin-bottom: 4px; }
    .m-service-desc p { margin: 0 !important; white-space: pre-line !important; }
}
/* ==========================================================================
   ORDERS PAGE HYBRID RESPONSIVE LAYER (CENTERED & MODERN)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. MASAÜSTÜ SİPARİŞ TABLOSU AYARLARI (769px ve Üzeri Ekranlar)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    /* Sipariş tablosunu tam sayfa ortalayan ve kibarlaştıran kontrol grubu */
    .card-table.hidden-xs-premium,
    .well-float.card-premium.card-table {
        max-width: 1020px !important; /* Servisler tablosu ile kusursuz simetri */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
        float: none !important;
        clear: both !important;
        border: 1px solid var(--hairline) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* Yazı tiplerini modern sans-serif yapalım */
    .table-premium thead th,
    .table-premium tbody td {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    }

    .table-premium thead th {
        background: linear-gradient(180deg, #FBF8F1, #F4EFE3) !important;
        padding: 14px 16px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--ink) !important;
    }

    .table-premium tbody td {
        padding: 12px 16px !important;
        vertical-align: middle !important;
        font-size: 13.5px !important;
        color: var(--ink-soft);
    }

    /* Uzun sipariş linkleri ve servis adları tabloyu yamultmasın diye kırpma kuralları */
    .order-link-text {
        display: inline-block;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    
    .order-service-cell {
        max-width: 300px;
        white-space: normal !important;
        line-height: 1.4;
    }
}

/* --------------------------------------------------------------------------
   B. MOBİL SİPARİŞ KARTLARI AYARLARI (768px ve Altı Ekranlar)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Uzun link metninin mobilde kartın dışına taşmasını kökten engelleme */
    .mobile-service-card .m-val {
        text-align: right;
        word-break: break-all;
    }

    /* Sipariş isminin kart üstündeki genel estetiği */
    .m-order-service-name {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        border-left: 3px solid var(--accent);
        padding-left: 8px;
    }

    /* Durum haplarının (status-pill) mobil kart içi genel dikey ortalaması */
    .mobile-service-card .status-pill {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }
}
/* ==========================================================================
   ORDERS TABLE BREAKOUT & ALIGNMENT FIX (ULTIMATE)
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. Ana dış kutunun genişliğini sabitleyip, içindeki tüm ekstra sıkıştırıcı boşlukları sıfırlıyoruz */
    .card-table.hidden-xs-premium,
    .well-float.card-premium.card-table {
        max-width: 1060px !important; /* Genişliği hafifçe rahatlattık */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important; /* İçerideki görünmez Bootstrap boşluğunu sıfırladık */
        border: 1px solid var(--hairline) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* 2. Tabloyu taşıyan responsive katmanın sağa taşmasını kesin olarak engelleyen kural */
    .card-table.hidden-xs-premium .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* Sağa taşan çirkin çubuğu ve taşmayı engeller */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Tablo yerleşim yapısını milimetrik kilitliyoruz */
    .card-table.hidden-xs-premium table.table-premium {
        table-layout: fixed !important; /* İçerik ne olursa olsun sütunları verdiğimiz ölçüde tutar */
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
    }

    /* 4. SÜTUN GENİŞLİKLERİ (Ekran görüntündeki doluluk oranlarına göre revize edildi) */
    .table-premium thead tr th:nth-child(1), .table-premium tbody tr td:nth-child(1) { width: 70px !important; }  /* ID */
    .table-premium thead tr th:nth-child(2), .table-premium tbody tr td:nth-child(2) { width: 140px !important; } /* Date */
    .table-premium thead tr th:nth-child(3), .table-premium tbody tr td:nth-child(3) { width: 200px !important; } /* Link */
    .table-premium thead tr th:nth-child(4), .table-premium tbody tr td:nth-child(4) { width: 70px !important; }  /* Charge */
    .table-premium thead tr th:nth-child(5), .table-premium tbody tr td:nth-child(5) { width: 90px !important; }  /* Start count */
    .table-premium thead tr th:nth-child(6), .table-premium tbody tr td:nth-child(6) { width: 75px !important; }  /* Quantity */
    .table-premium thead tr th:nth-child(7), .table-premium tbody tr td:nth-child(7) { width: 220px !important; } /* Service Name */
    .table-premium thead tr th:nth-child(8), .table-premium tbody tr td:nth-child(8) { width: 110px !important; } /* Status */
    .table-premium thead tr th:nth-child(9), .table-premium tbody tr td:nth-child(9) { width: 75px !important; }  /* Remains */

    /* 5. Taşmayı önleyen hücre içi kırpma kuralları */
    .table-premium tbody tr td {
        padding: 12px 10px !important;
        vertical-align: middle !important;
        font-size: 13.5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Sığmayan yazıyı keser */
    }

    /* Linklerin sığmadığı yerde taşmasını önleyen kesin çözüm */
    .order-link-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Servis ismi uzun olduğunda alt satıra geçsin, tabloyu sağa itmesin */
    .order-service-cell {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        font-size: 12.5px !important;
    }
}
/* ==========================================================================
   ORDERS PAGE COMPLETE FIX (TABLE ALIGNMENT & TOP FILTERS CENTERED)
   ========================================================================== */
@media (min-width: 769px) {
    /* Buton grubu ve arama çubuğunu taşıyan üst kutuyu tabloyla birebir eşitleyip ortalıyoruz */
    .order-filter-wrapper {
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .order-filter-wrapper .nav-pills-premium {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .order-filter-wrapper .pull-right.search {
        margin: 0 !important;
        max-width: 250px !important;
    }

    .order-filter-wrapper .nav-pills-premium > li > a {
        padding: 8px 16px !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

    /* Tablonun kaba durmasını ve sağ taraftan kesilmesini engelleyen ana kutu kuralları */
    .card-table.hidden-xs-premium,
    .well-float.card-premium.card-table {
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
        border: 1px solid var(--hairline) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .card-table.hidden-xs-premium .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .card-table.hidden-xs-premium table.table-premium {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
    }

    /* Tablo sütunlarının kilit pikselleri (Sağ tarafın taşmasını bu kural engeller) */
    .table-premium thead tr th:nth-child(1), .table-premium tbody tr td:nth-child(1) { width: 70px !important; }
    .table-premium thead tr th:nth-child(2), .table-premium tbody tr td:nth-child(2) { width: 140px !important; }
    .table-premium thead tr th:nth-child(3), .table-premium tbody tr td:nth-child(3) { width: 200px !important; }
    .table-premium thead tr th:nth-child(4), .table-premium tbody tr td:nth-child(4) { width: 70px !important; }
    .table-premium thead tr th:nth-child(5), .table-premium tbody tr td:nth-child(5) { width: 90px !important; }
    .table-premium thead tr th:nth-child(6), .table-premium tbody tr td:nth-child(6) { width: 75px !important; }
    .table-premium thead tr th:nth-child(7), .table-premium tbody tr td:nth-child(7) { width: 220px !important; }
    .table-premium thead tr th:nth-child(8), .table-premium tbody tr td:nth-child(8) { width: 110px !important; }
    .table-premium thead tr th:nth-child(9), .table-premium tbody tr td:nth-child(9) { width: 75px !important; }

    .table-premium thead th, .table-premium tbody td {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    }

    .table-premium thead th {
        background: linear-gradient(180deg, #FBF8F1, #F4EFE3) !important;
        padding: 14px 16px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--ink) !important;
    }

    .table-premium tbody td {
        padding: 12px 10px !important;
        vertical-align: middle !important;
        font-size: 13.5px !important;
        color: var(--ink-soft);
    }

    /* Linklerin '...' şeklinde kibarca sığdırılması */
    .order-link-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .order-service-cell {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        font-size: 12.5px !important;
    }
}

/* Mobilde filtre alanının sıkışmaması için küçük düzenleme */
@media (max-width: 768px) {
    .order-filter-wrapper {
        margin-bottom: 20px !important;
        padding: 0 4px !important;
    }
    .order-filter-wrapper .pull-right.search {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
    .mobile-service-card .m-val {
        text-align: right;
        word-break: break-all;
    }
    .m-order-service-name {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        border-left: 3px solid var(--accent);
        padding-left: 8px;
    }
    .mobile-service-card .status-pill {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }
}
/* ==========================================================================
   REFILL PAGE COMPLETE FIX (FILTER ALIGNMENT & RESPONSIVE CONSTRAINTS)
   ========================================================================== */
@media (min-width: 769px) {
    /* Telafi sayfası filtre ve arama alanını tabloyla eşitleyip ortalıyoruz */
    .refill-filter-wrapper {
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .refill-filter-wrapper .nav-pills-premium {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .refill-filter-wrapper .pull-right.search {
        margin: 0 !important;
        max-width: 250px !important;
    }

    .refill-filter-wrapper .nav-pills-premium > li > a {
        padding: 8px 16px !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

    /* Refill tablosunu jilet gibi ortalayan ana gövde */
    .card-table.hidden-xs-premium,
    .well-float.card-premium.card-table {
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
        border: 1px solid var(--hairline) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .card-table.hidden-xs-premium table.table-premium {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
    }

    /* Sütun genişlik sabitlemeleri (Taşma önleyiciler) */
    .table-premium thead tr th:nth-child(1), .table-premium tbody tr td:nth-child(1) { width: 80px !important; }  /* ID */
    .table-premium thead tr th:nth-child(2), .table-premium tbody tr td:nth-child(2) { width: 150px !important; } /* Date */
    .table-premium thead tr th:nth-child(3), .table-premium tbody tr td:nth-child(3) { width: 100px !important; } /* Order ID */
    .table-premium thead tr th:nth-child(4), .table-premium tbody tr td:nth-child(4) { width: 230px !important; } /* Link */
    .table-premium thead tr th:nth-child(5), .table-premium tbody tr td:nth-child(5) { width: 380px !important; } /* Service */
    .table-premium thead tr th:nth-child(6), .table-premium tbody tr td:nth-child(6) { width: 120px !important; } /* Status */

    .refill-link-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .refill-service-cell {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
        font-size: 12.5px !important;
    }
}

/* Mobilde filtre alanının sıkışmaması için senkronizasyon */
@media (max-width: 768px) {
    .refill-filter-wrapper {
        margin-bottom: 20px !important;
        padding: 0 4px !important;
    }
    .refill-filter-wrapper .pull-right.search {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
}
/* ==========================================================================
   PREMIUM WELCOME CARD DESIGN (MODERN & CORPORATE)
   ========================================================================== */
:root {
    --brand-gradient: linear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%);
    --card-bg: #ffffff;
    --text-dark: #1d1d1f;
    --text-muted: #86868b;
    --wa-green: #25D366;
    --wa-hover: #20ba5a;
}

.welcome-premium-card {
    max-width: 680px !important;
    margin: none;
    background: var(--card-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 24px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.02) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.welcome-premium-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
}

/* En üstteki ince duyuru rozeti */
.welcome-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FFF0F0 !important;
    color: #D32F2F !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(211, 47, 47, 0.1) !important;
}

.badge-dot {
    width: 6px !important;
    height: 6px !important;
    background-color: #D32F2F !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: pulse-red 2s infinite !important;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(211, 47, 47, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

/* Başlık Grubu */
.welcome-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.5px !important;
}

.brand-gradient {
    background: var(--brand-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 900 !important;
}

.welcome-subtitle-main {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #4364F7 !important;
    margin: 0 0 8px 0 !important;
}

.welcome-subtitle-sub {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    margin: 0 0 24px 0 !important;
}

.welcome-divider {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0) 100%) !important;
    margin: 24px 0 !important;
}

/* İletişim ve WhatsApp Alanı */
.welcome-contact-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.contact-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.whatsapp-premium-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #eafaf1 !important;
    color: #1a9e49 !important;
    padding: 12px 28px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(37, 211, 102, 0.15) !important;
}

.whatsapp-premium-btn i {
    font-size: 20px !important;
}

.whatsapp-premium-btn:hover {
    background: var(--wa-green) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2) !important;
    border-color: transparent !important;
}

/* Alt Bilgi */
.welcome-footer {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.footer-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    background: #f5f5f7 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
}

/* Mobilde Kartın Tam Ekrana Yayılması ve Genişlemesi İçin Kesin Çözüm */
@media (max-width: 768px) {
    .welcome-premium-card {
        margin: 15px 0px !important; /* Sağ ve soldaki dış boşlukları sıfırlayıp ekranı kaplattık */
        padding: 24px 16px !important; /* İç boşlukları daraltarak yazı alanını genişlettik */
        border-radius: 16px !important;
        width: 100% !important; /* Kartın genişliğini tam ekran yaptık */
        max-width: 100% !important;
    }
    
    .welcome-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
        white-space: normal !important; /* Yazının sığmadığında alt satıra taşmasını sağlar */
        display: inline-block !important;
    }
    
    .welcome-title { 
        font-size: 24px !important; 
    }
    
    .welcome-subtitle-main { 
        font-size: 15px !important; 
        line-height: 1.3 !important;
    }
    
    .welcome-subtitle-sub { 
        font-size: 13px !important; 
    }
    
    .whatsapp-premium-btn { 
        width: 100% !important; 
        justify-content: center !important; 
        font-size: 14.5px !important;
        padding: 10px 16px !important;
    }
}
/* ==========================================================================
   PREMIUM SIGN IN BUTTON DESIGN
   ========================================================================== */
.btn-premium-signin {
    background: linear-gradient(135deg, #1357de 0%, #4f7af8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important; /* Giriş kutusunun modern oval köşelerine tam uyum */
    box-shadow: 0 4px 12px rgba(23, 60, 179, 0.2) !important; /* Premium derinlik gölgesi */
    transition: all 0.25s ease !important;
    width: 100% !important; /* Giriş alanını tam kaplayarak denge sağlar */
    display: block !important;
    margin-top: 15px !important;
    cursor: pointer !important;
}

/* Butonun üzerine gelindiğinde (Hover durumu) */
.btn-premium-signin:hover, 
.btn-premium-signin:focus {
    background: linear-gradient(135deg, #173cb3 0%, #0045b5 100%) !important;
    box-shadow: 0 6px 20px rgba(23, 60, 179, 0.35) !important;
    transform: translateY(-1px) !important; /* Hafif yukarı kalkma efekti */
    color: #ffffff !important;
}

/* Butona tıklandığı an (Active durumu) */
.btn-premium-signin:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(23, 60, 179, 0.2) !important;
}

/* Beni hatırla (Remember me) yazısı ile butonun arasını biraz açıp ferahlatıyoruz */
.checkbox:has(+ .btn-premium-signin),
label:has(input[type="checkbox"]) {
    margin-bottom: 15px !important;
    font-size: 13.5px !important;
    color: #636366 !important;
}
@media (max-width: 768px) {
    /* Mobil filtrelerin tıklanabilirliğini garantile */
    .nav-pills-premium {
        position: relative !important;
        z-index: 9999 !important;
    }
    
    /* Eğer bir kapsayıcı (overlay) linkleri engelliyorsa: */
    .mobile-services-wrapper {
        position: relative !important;
        z-index: 1 !important;
    }
}
@media (max-width: 768px) {
    /* 1. Menü kapsayıcısını grid yapısına çeviriyoruz */
    .order-filter-wrapper {
        width: 100% !important;
        overflow: visible !important; /* Kaydırmayı kapattık */
    }

    .nav-pills-premium {
        display: flex !important;
        flex-wrap: wrap !important; /* Bir sonraki satıra geçmesini sağlar */
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    /* 2. Her bir butonun genişliğini %46 yaparsak 2 tanesi yan yana tam sığar */
    .nav-pills-premium > li {
        width: 46% !important; /* %46 genişlik ile satıra 2 tane sığar */
        box-sizing: border-box !important;
        float: none !important;
        display: block !important;
    }

    .nav-pills-premium > li > a {
        display: block !important;
        padding: 10px 5px !important;
        font-size: 12px !important;
        text-align: center !important;
        border-radius: 8px !important;
        background: #fdfbf6 !important;
        color: var(--ink) !important;
        border: 1px solid var(--hairline) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Taşarsa üç nokta koyar */
    }

    /* 3. Aktif durum rengi */
    .nav-pills-premium > li.active > a {
        background: #eef2fb !important;
        color: var(--ink) !important;
        border: 1px solid var(--accent) !important;
        font-weight: 700 !important;
    }

    /* 4. Arama kutusu en altta dursun */
    .pull-right.search {
        float: none !important;
        width: 100% !important;
        margin-top: 15px !important;
        display: block !important;
    }
}
/* ==========================================================================
   SELECT2 SEARCH BOX UNHIDE & PREMIUM FIX (FOR NEW ORDER PAGE)
   ========================================================================== */

/* 1. Kasıtlı veya dolaylı olarak gizlenen arama alanını zorla görünür yapıyoruz */
.select2-container--default .select2-search--dropdown,
.select2-search,
.select2-search--dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px 12px !important;
    background-color: #FDFBF6 !important;
}

/* 2. Temanın ezdiği input alanının genişlik, padding ve yükseklik ayarlarını düzeltiyoruz */
.select2-container--open .select2-search__field {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px 8px 32px !important; /* Sol tarafa arama ikonu boşluğu */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px !important;
    outline: none !important;
}

/* 3. Arama input alanına tıklandığında (focus) mavi parlama efektini entegre ediyoruz */
.select2-search__field:focus {
    border-color: #5dade2 !important;
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.2) !important;
}

/* 4. Arama kutusunun içine şık bir büyüteç (search) ikonu yerleştiriyoruz */
.select2-search--dropdown::before {
    content: "\f002" !important; /* FontAwesome Search İkonu */
    font-family: "FontAwesome" !important;
    position: absolute !important;
    left: 24px !important;
    top: 20px !important;
    font-size: 13px !important;
    color: var(--muted) !important;
    z-index: 9 !important;
    pointer-events: none !important;
}

/* 5. Select2'nin açılır menü listesini genel premium temaya uyumlu hale getiriyoruz */
.select2-dropdown {
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.select2-results__option {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    color: var(--ink-soft) !important;
}

/* Seçilen veya üstüne gelinen servis satırının renk ayarı */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: none;
    color: #ffffff !important;
}
/* Select2 İçindeki Özel ID Hapı (Badge) Tasarımı */
.select2-mavi-hap {
    display: inline-block !important;
    background-color: #2196F3 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-right: 6px !important;
}

/* Servis İsmi Metin Yapısı */
.select2-servis-adi {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Select2 Arama Alanı Kusursuzlaştırma */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: none;
}
/* Custom Arama Dropdown Alanı */
.custom-search-container {
    position: relative;
    width: 100%;
}

.custom-service-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    z-index: 99999 !important;
    margin-top: 4px;
}

.custom-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
}

.custom-dropdown-item:last-child {
    border-bottom: none;
}

.custom-dropdown-item:hover {
    background-color: #f8fafc;
}

.custom-dropdown-item.active {
    background-color: #e2e8f0;
    font-weight: 600;
}

/* İstediğin Oval Mavi ID Hapı */
.custom-badge-id {
    background-color: #2196F3 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-right: 8px !important;
    white-space: nowrap;
}

.custom-service-name-text {
    font-weight: 500;
    color: #1e293b;
}
/* Services Sayfası Gelişmiş Arama Kutusu Tasarımı */
.premium-search-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    height: auto !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Arama Kutusuna Tıklandığında (Focus Durumu) */
.premium-search-box:focus {
    border-color: #2196F3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
    outline: none !important;
    background-color: #fff !important;
}

/* Arama Kutusu Placeholder (İpucu Yazısı) Rengi */
.premium-search-box::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Arama Kutusunun Solundaki Büyüteç İkonu Alanı */
.premium-search-addon {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    color: #64748b !important;
    padding: 0 15px !important;
    font-size: 16px !important;
}

/* İkon Alanından Sonra Gelen Input Kutusu İçin Sol Köşe Yumuşatma Ayarı */
.premium-search-addon + .premium-search-box {
    border-radius: 0 10px 10px 0 !important;
}
/* Arama Kutusunu Barındıran Well Kartını Alt Listeyle Eşitleme */
.well.card-premium:has(#searchService) {
    max-width: 100% !important; /* Eğer dış çerçeve sınırlıysa tam oturt */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px !important;
}

/* Arama kutusunun genişliğini ve hizalamasını alt tabloyla %100 eşitler */
.premium-search-box {
    width: 100% !important;
}

/* Eğer services.twig içinde liste bir container veya tablo içindeyse 
   arama kutusunun etrafındaki boşluğu tablonun boşluğuyla sıfırlıyoruz */
#searchService {
    box-sizing: border-box !important;
}
/* Sol ve Sağ Sola Hizalama (Yazının ikona çarpmasını önleyen kritik kısım) */
#new-order-search:not([data-dir="rtl"]) #template-input {
    padding-left: 48px !important; /* Değeri artırdık ve öncelik verdik */
    padding-right: 16px !important;
}

#new-order-search[data-dir="rtl"] #template-input {
    padding-right: 48px !important;
    padding-left: 16px !important;
}

/* Büyüteç Butonunun Konumu */
#new-order-search .input-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    color: #94a3b8;
    transition: color 0.3s ease;
    z-index: 10; /* İkonun inputun altında kalmaması için yükselttik */
    pointer-events: none; /* Butona tıklayınca da inputun odaklanmasını sağlar */
}

/* Ana Kapsayıcı - Altındaki tabloya göre sınırlandırılmış ve ortalanmış hali */
.search-dropdown-modern {
    margin-bottom: 25px;
    width: 100%;
    
    /* 1. ADIM: Tablonun genişliği ile eşitlemek için (Sitenin yapısına göre 1140px veya 1200px idealdir) */
    max-width: 1140px !important; 
    
    /* 2. ADIM: Arama kutusunu ekranda tam ortalayarak tablonun hizasına getirmek için */
    margin-left: auto !important;
    margin-right: auto !important;
}
    
    /* GENİŞLİK AYARLARI: */
    width: 100%;             /* Küçük ekranlarda tam genişlik kaplasın diye */
    max-width: 500px;        /* Arama kutusunun maksimum genişliği (Örn: 400px, 600px yapabilirsiniz) */
    
    /* Hizalama Ayarı: Eğer kutuyu ortalamak isterseniz aşağıdaki satırı açabilirsiniz: */
    /* margin-left: auto; margin-right: auto; */
}

/* Giriş Alanı Sarıcı */
.search-dropdown-modern .input-wrapper-modern {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Büyüteç İkonunun Sabit Konumu */
.search-dropdown-modern .search-icon-modern {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    z-index: 15;
    pointer-events: none;
}

/* Sol-Sağ konumlandırma (İkon için) */
.search-dropdown-modern:not([data-dir="rtl"]) .search-icon-modern {
    left: 16px;
}
.search-dropdown-modern[data-dir="rtl"] .search-icon-modern {
    right: 16px;
}

/* Giriş (Input) Alanı */
.search-dropdown-modern #template-input {
    width: 100% !important;
    height: 48px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Yazının İkona Çarpmaması İçin Zorunlu Boşluk (Padding) */
.search-dropdown-modern:not([data-dir="rtl"]) #template-input {
    padding-left: 48px !important;
    padding-right: 16px !important;
}
.search-dropdown-modern[data-dir="rtl"] #template-input {
    padding-right: 48px !important;
    padding-left: 16px !important;
}

/* Tıklayınca (Focus) Efekti */
.search-dropdown-modern #template-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
    background-color: #ffffff !important;
}
/* Açılır menüdeki aktif/seçili elemanın lacivert arka plan rengini değiştirir */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #3b82f6 !important; /* Buraya istediğin renk kodunu yaz */
    color: #ffffff !important;            /* Yazı rengi (Beyaz kalması okunurluk için iyidir) */
}

/* Eğer Bootstrap'in standart kütüphanesi aktifse alternatif seçici */
.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}
/* Üst üste binen fazla arama ikonunu kesin olarak gizleme */
.select2-search--dropdown::before,
.select2-search::before,
.search-dropdown-modern .search-icon-modern,
.search-dropdown-modern .fa-search {
    display: none !important;
    content: none !important;
}

/* Kendi orijinal ikonunun yerleşimini bozmamak için gerekirse sol boşluğu sıfırlayalım */
.select2-search--dropdown {
    position: relative !important;
}
/* 1. TÜM SELECT2 TEMA VARYASYONLARINDA HOVER BEYAZLIĞINI SİLME */
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-results__option[class*="highlighted"],
.select2-results__option:hover {
    background-color: #3b82f6 !important; /* Arka planı o güzel maviye sabitler */
    color: #ffffff !important;            /* Yazı rengini beyaz tutar */
}

/* 2. EĞER SEÇİLİ OLAN ELEMANIN ÜSTÜNE GELİNİRSE (Mavi Alanın Üstü) */
.select2-results__option[aria-selected="true"]:hover,
.select2-container--default .select2-results__option[aria-selected="true"]:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* 3. LİSTEDEKİ DİĞER SEÇİLMEMİŞ (BEYAZ) ELEMANLARIN ÜSTÜNE GELİNİNCE */
/* Üstteki kod tüm listeyi mavi yapmasın diye, seçilmemiş elemanların hover durumunu burası korur */
.select2-results__option:not([aria-selected="true"]):hover,
.select2-container--default .select2-results__option:not([aria-selected="true"]):hover {
    background-color: #f1f5f9 !important; /* Diğer elamanların üstüne gelince hafif gri olur, beyaz şerit kalmaz */
    color: #1e293b !important;            /* Yazı rengi koyu kalır */
}
/* ==========================================================================
   SERVICES PAGE SEARCH BAR ALIGNMENT FIX (ULTIMATE)
   ========================================================================== */
@media (min-width: 769px) {
    /* Arama kutusunu saran ana well alanını alttaki tabloyla eşitleyip ortalıyoruz */
    .well.card-premium:has(#searchService) {
        max-width: 1060px !important; /* Tablonun max-width değeri ile birebir eşitleme */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        padding: 16px 18px !important; /* Tablo başlıklarındaki padding ile senkronize iç boşluk */
        background: linear-gradient(180deg, #fff, #FDFBF6) !important;
    }

    /* Input grubunun dışarı taşmasını engelleme */
    .well.card-premium:has(#searchService) .form-group {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Arama kutusunun kendisini esnek ama kontrollü yapıyoruz */
    #searchService.premium-search-box {
        width: 100% !important;
        max-width: 100% !important;
        height: 44px !important; /* Daha premium ve dengeli bir yükseklik */
        border: 1px solid var(--hairline) !important;
        border-radius: 8px !important;
    }
}

/* Mobil ekranlarda (768px ve altı) arama kutusunun kenarlara yapışmasını önleyen estetik ayar */
@media (max-width: 768px) {
    .well.card-premium:has(#searchService) {
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================================================
   NEW ORDER PREMIUM SUBMIT BUTTON
   ========================================================================== */
.btn-lg-cta {
    display: block !important;
    width: 100% !important;
    height: 52px !important; /* İdeal tıklama alanı yüksekliği */
    background: linear-gradient(135deg, var(--ink), var(--accent)) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent) !important;
    border-radius: 12px !important; /* Form elementleriyle uyumlu yuvarlaklık */
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase; /* Daha kurumsal ve net duruş */
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing), background 0.3s ease !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Butonun üzerine gelindiğinde (Hover Efekti) */
.btn-lg-cta:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--ink)) !important;
    border-color: var(--accent-dark) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important; /* Hafif yukarı kalkma hareketi */
}

/* Butona tıklandığında (Active Efekti) */
.btn-lg-cta:active {
    transform: translateY(0px) !important; /* Basılma hissi */
    box-shadow: var(--shadow-sm) !important;
}

/* Mobil ekranlar için küçük bir dokunuş */
@media (max-width: 768px) {
    .btn-lg-cta {
        height: 48px !important;
        font-size: 14.5px !important;
    }
}
/* Ana Bildirim Kartı - Sade & Modern Revizyon */
.alert-premium {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important; /* Her yönden eşit, temiz iç boşluk */
    margin-bottom: 28px !important;
    position: relative;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 4px 12px -5px rgba(15, 23, 42, 0.02) !important;
    overflow: hidden;
    color: #334155 !important;
}

/* "Hello @username" Başlığı */
.alert-premium strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a !important;
    margin-bottom: 10px; /* Başlık ile liste başlangıcı arası */
    letter-spacing: -0.3px;
}

/* Bilgilendirme Maddeleri (Maksimum Bitişik Görünüm) */
.alert-premium p {
    font-size: 14px;
    font-weight: 500;
    color: #475569 !important;
    margin: 0 !important; 
    padding: 2px 0 !important; 
    line-height: 1.3 !important; 
    display: flex !important;
    align-items: flex-start; 
    position: relative;
}

/* Maddelerin başına modern nokta imleci */
.alert-premium p::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background-color: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    margin-right: 14px; /* Nokta ile yazı arasındaki mesafe */
    margin-top: 6px; /* Noktayı metnin ilk satırıyla tam ortalama */
}

/* Kapatma (X) Butonu */
.alert-premium .close {
    position: absolute;
    top: 18px !important;
    right: 20px !important;
    color: #94a3b8 !important;
    opacity: 0.6;
    font-size: 20px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
}

.alert-premium .close:hover {
    color: #ef4444 !important;
    opacity: 1;
    transform: scale(1.1);
}

/* Sağdan Sola (RTL) Dil Desteği Uyumu */
.rtl-form .alert-premium p::before {
    margin-right: 0;
    margin-left: 14px;
}
.rtl-form .alert-premium .close {
    right: auto;
    left: 20px !important;
}
/* --- Üst Başlık Yeni Stil Düzenlemeleri (Çakışma Önlenmiş Sürüm) --- */
.custom-smm-header {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Sadece üstteki bizim başlığımızı etkiler, alttakileri bozmaz */
h1.spec-welcome-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #0b1a30 !important;
    margin-bottom: 25px !important;
    position: relative !important;
    display: inline-block !important;
}

h1.spec-welcome-title .brand-blue {
    color: #3b71f3 !important;
}

/* Çizgiyi sıfırdan oluşturup sadece buraya ortalıyoruz */
h1.spec-welcome-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px; /* Temandaki çizgi genişliğine göre burayı 40px-60px arası değiştirebilirsin */
    height: 3px; /* Çizgi kalınlığı */
    background: linear-gradient(90deg, #0b1a30, #3b71f3); /* Temandaki renk geçişi (Gerekirse değiştirebilirsin) */
}

p.spec-welcome-subtitle {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #3b71f3 !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

p.spec-welcome-desc {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6c757d !important;
    margin-bottom: 0 !important;
}
/* --- Alt Kart Stil Düzenlemeleri (KESİN ÇÖZÜM - STİLLERİ ZORLA UYGULAR) --- */
.custom-smm-footer-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 25px !important;
    text-align: center !important;
}

/* Kırmızı Güncelleme Rozeti */
.custom-smm-footer-card .update-badge-container {
    margin-bottom: 20px !important;
    display: block !important;
    width: 100% !important;
}

.custom-smm-footer-card .update-badge {
    background-color: #fff5f5 !important;
    color: #ff4d4d !important;
    border: 1px solid #ffe3e3 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.custom-smm-footer-card .badge-dot {
    margin-right: 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #ff4d4d !important;
}

/* Contact ve WhatsApp Alanı */
.custom-smm-footer-card .contact-section {
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
}

.custom-smm-footer-card .contact-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #333333 !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* WhatsApp Butonunu Orijinal Yeşil Tasarımına Zorlar */
.custom-smm-footer-card a.whatsapp-btn,
.custom-smm-footer-card .whatsapp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #e8f9f1 !important;
    color: #10b981 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 1px solid #c6f6d5 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.custom-smm-footer-card a.whatsapp-btn:hover {
    background-color: #d1f7e2 !important;
    color: #059669 !important;
    text-decoration: none !important;
}

/* Since 2020 Rozeti */
.custom-smm-footer-card .since-badge {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}
/* ==========================================================================
   SMMVİO PREMIUM MODERN NAVBAR CODE (ORİJİNAL WEB KONUMLANDIRMALI)
   ========================================================================== */

/* Ana Kapsayıcı: Orijinal Bootstrap navbar yüksekliğini ve yapısını korur */
.premium-navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-height: 74px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Orijinal Bootstrap Hizalamalarını Ezmiyoruz, Sadece İçeriyi Düzenliyoruz */
.premium-navbar .container,
.premium-navbar .container-fluid {
    display: block !important;
}

/* Logo Alanı: Orijinal gibi sola yaslı */
.navbar-brand-modern {
    display: inline-flex !important;
    align-items: center !important;
    height: 74px !important;
    padding: 0 15px !important;
    text-decoration: none !important;
    float: left !important;
}

.navbar-brand-modern img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain;
}

/* Masaüstü Yerleşim ve Dikey Ortalama Kuralları */
@media (min-width: 768px) {
    .premium-navbar .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 74px !important;
        padding: 0 !important;
    }

    /* Sol taraftaki menü link grubu */
    .navbar-menu-modern.navbar-left {
        display: flex !important;
        align-items: center !important;
        float: left !important;
        margin: 0 0 0 15px !important;
        padding: 0 !important;
    }
    
    /* Sağ taraftaki bakiye ve hesap grubu */
    .navbar-user-menu.navbar-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        float: right !important;
        margin: 0 15px 0 0 !important;
        padding: 0 !important;
        gap: 10px !important;
    }
}

/* Link Stilleri ve Yuvarlatılmış Soft Arka Planlar */
.navbar-menu-modern li a {
    color: var(--ink-soft) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s var(--easing) !important;
    margin: 0 2px;
}

.navbar-menu-modern li a i {
    color: var(--muted);
    font-size: 13px;
}

.navbar-menu-modern li a:hover {
    color: var(--ink) !important;
    background: rgba(22, 40, 74, 0.04) !important;
}

/* Aktif Link Tasarımı */
.navbar-menu-modern li.active a {
    color: var(--ink) !important;
    background: #F4EFE3 !important;
    font-weight: 600 !important;
}

.navbar-menu-modern li.active a i {
    color: var(--ink) !important;
}

/* Bakiye Hapı */
.premium-balance-badge {
    background: linear-gradient(135deg, #FBF3E0, #F4EAD0) !important;
    border: 1px solid #EAD9A8 !important;
    color: var(--ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform 0.2s ease;
}

.premium-balance-badge i {
    color: var(--gold) !important;
}

/* Kullanıcı Butonları */
.navbar-user-btn {
    color: var(--ink-soft) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--hairline) !important;
    background: #fff !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.navbar-user-btn:hover {
    color: var(--ink) !important;
    background: var(--bg-soft) !important;
}

.navbar-user-btn.logout-btn:hover {
    color: var(--danger) !important;
    background: #FBECEC !important;
    border-color: #F2CFCF !important;
}

/* Orijinal Mobil Hamburger Menü Butonu */
.premium-navbar .navbar-toggle {
    border: 1px solid var(--hairline) !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding: 10px !important;
}

.premium-navbar .navbar-toggle .icon-bar {
    background-color: var(--ink) !important;
    width: 22px;
    height: 2px;
}

/* Mobil Açılır Menü Düzenlemeleri (767px ve altı) */
@media (max-width: 767px) {
    .premium-navbar .navbar-collapse {
        background: #ffffff !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
        border: 1px solid var(--hairline) !important;
        padding: 10px !important;
    }

    .navbar-menu-modern, .navbar-user-menu {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .navbar-menu-modern li, .navbar-user-menu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 4px 0 !important;
    }

    .navbar-menu-modern li a, .navbar-user-btn, .premium-balance-badge {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.caret-custom {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid var(--muted);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.modern-dropdown-list {
    background: #ffffff !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
    padding: 6px !important;
}
/* Mobilde link satırının yerleşimi */
.m-link-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Tıklanabilir, kırpılmış ve şık mobil link kuralları */
.mobile-service-card .m-link-truncate {
    display: inline-block !important;
    max-width: 60% !important; /* Kartın %60'ından fazlasını kaplamasın, etiketi sıkıştırmasın */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: right !important;
    color: #1f3b73 !important; /* Premium pastel lacivert vurgu rengi */
    font-weight: 600 !important;
    text-decoration: none !important; /* Altındaki çirkin düz çizgiyi kaldırır */
    padding: 4px 0; /* Mobilde parmakla tıklama alanını (hitbox) genişletir */
    transition: opacity 0.2s ease !important;
}

/* Linke basıldığında hafif bir opaklık efekti (Apple tarzı) */
.mobile-service-card .m-link-truncate:active {
    opacity: 0.6;
}
/* Masaüstü tablosundaki linklerin premium görünümü */
.order-link-text {
    color: #1f3b73 !important; /* Premium pastel lacivert tonu */
    transition: color 0.2s ease, opacity 0.2s ease !important;
    display: inline-block;
    max-width: 250px; /* Tablo dengesini bozmasın diye çok uzun linkleri sınırlar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Linkin üzerine gelindiğinde hafifçe parlaması */
.order-link-text:hover {
    color: #3a63b0 !important; /* Biraz daha açık bir mavi tonu */
    opacity: 0.85;
}