/* =====================================================================
   UFO Elektrik - Temaya eklenen özel stiller
   Tema dosyası (style.min.css) hiç değiştirilmez; farklar burada tutulur.
   ===================================================================== */

:root {
    --ufo-success: #28a745;
    --ufo-danger: #dc3545;
    --ufo-warning: #f0a800;
    --ufo-info: #17a2b8;
    --ufo-muted: #6d6d6d;
    --ufo-border: #e6e6e6;

    /* Ürün görsel kutusu. Tedarikçi fotoğrafları farklı en/boy oranlarında geldiği
       için kutu sabittir, görsel içine sığdırılır (kırpılmaz). Tüm ürün görselleri
       tek yerden ayarlansın diye değişken olarak tutulur. */
    --ufo-product-ratio: 4 / 5;
    --ufo-media-bg: #fff;

    /* Kategori görselleri genelde logo/simge biçiminde olduğu için kare kutu. */
    --ufo-category-ratio: 1 / 1;
}

/* ---------- Bildirimler ---------- */
.alert {
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 14px 18px;
    font-size: 15px;
}

.alert i {
    margin-right: 6px;
}

/* ---------- Ürün görselleri: sabit kutu ----------
   Tema, görsele yalnızca "width:100%" verip yüksekliği serbest bırakıyor. Fotoğraflar
   farklı oranlarda geldiği için kartlar birbirinden farklı boyda çıkıyor, listede satırlar
   kayıyor ve detay galerisinde slaytlar arasında yükseklik zıplıyordu.
   Çözüm: görsel her yerde --ufo-product-ratio oranında sabit bir kutuya oturur ve
   "object-fit: contain" ile içine sığdırılır -- ürünün hiçbir kenarı kırpılmaz.
   Kutuyu tamamen dolduran (kenarları kırpan) görünüm isteniyorsa buradaki
   "contain" değerlerini "cover" yapmak yeterlidir. */

/* Liste kartı. Seçici bilerek "> a" ile sınırlandırıldı: ürün detayındaki galeri de
   .axil-product sınıfını taşıyor ama görselini <a> ile sarmıyor. */
.axil-product > .thumbnail > a img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ufo-product-ratio);
    object-fit: contain;
    padding: 12px;
}

/* Fare ile üzerine gelince gösterilen ikinci görsel, kutuyu üst üste bindirme yoluyla
   doldurur; yüksekliği konumlandırmadan geldiği için oran yerine %100 verilir. */
.axil-product > .thumbnail > a .hover-img {
    height: 100%;
    aspect-ratio: auto;
}

/* Ürün detayı: ana galeri. Slayt yüksekliği sabit kalsın diye oran görsele verilir.
   Tema, rozete yer açmak için slayda 45px sağ dolgu koyuyor; rozet zaten kutunun
   içinde durduğu için bu dolgu kaldırılır, aksi halde görsel sütunda sola kayık durur. */
.js-product-gallery.single-product-thumbnail.thumbnail-badge .thumbnail {
    padding-right: 0;
}

.js-product-gallery .thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ufo-product-ratio);
    object-fit: contain;
    background-color: var(--ufo-media-bg);
    border-radius: 8px;
    padding: 20px;
}

/* Ürün detayı: küçük önizleme şeridi. Kareye oturur, hepsi aynı boyda görünür. */
.small-thumb-wrapper .small-thumb-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--ufo-media-bg);
    padding: 6px;
}

/* Hızlı bakış penceresindeki tek görsel. */
.quick-view-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ufo-product-ratio);
    object-fit: contain;
    background-color: var(--ufo-media-bg);
    border-radius: 8px;
    padding: 20px;
}

/* Anasayfadaki kategori kartı. Tema görsele hiç genişlik vermiyor (yalnızca
   "min-height:41px"), bu yüzden her görsel kendi doğal boyunda çıkıp kartları
   birbirinden farklı yükseklikte bırakıyordu. Ürün kartlarındaki gibi sabit kutu. */
.categrie-product .thumbnail img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ufo-category-ratio);
    object-fit: contain;
    min-height: 0;
    margin: 0 auto 12px;
}

/* Tema kart dolgusunu iç <a> öğesine veriyor (".categrie-product a"); buradaki
   işaretlemede bağlantının kendisi .categrie-product olduğu için o kural hiç
   eşleşmiyor, üstelik <a> satır içi kaldığından dolgu düzeni de etkilemiyordu.
   Bağlantı blok yapılır ve dolgu doğrudan ona verilir. */
.categrie-product {
    display: block;
    padding: 22px 14px;
}

.categrie-product .cat-content .title {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.categrie-product .cat-content .cat-count {
    display: block;
    font-size: 13px;
    color: var(--ufo-muted);
}

/* ---------- Ürün kartı ekleri ---------- */
/* Kart çerçevesi. Kartın zemini de görsel zemini de beyaz olduğu için ürünler
   sayfa zemininde eriyip gidiyor, listede nerede bitip nerede başladıkları
   seçilmiyordu. Kategori kartındaki çerçevenin (bkz. style.min.css içindeki
   ".categrie-product:before") aynısı ürün kartına da verilir; iki liste görsel
   olarak aynı dili konuşur. Yalnızca liste kartına uygulanır -- ürün detayındaki
   galeri de .axil-product sınıfını taşıyor ama product-style-four almıyor. */
.axil-product.product-style-four {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    box-shadow: 0 15px 20px -10px rgba(0, 0, 0, .04);
    padding: 12px 12px 0;
    height: 100%;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.axil-product.product-style-four:hover {
    box-shadow: 0 20px 20px -10px rgba(0, 0, 0, .1);
}

/* Çerçeve zaten görselin çevresinde boşluk bıraktığı için görselin kendi dolgusu
   azaltılır; yoksa fotoğraf kartın ortasında küçücük kalıyordu. */
.axil-product.product-style-four > .thumbnail > a img {
    padding: 6px;
}

/* Tema, alt bloğa çerçevesiz tasarıma göre boşluk veriyor (25px üst, 30px alt);
   çerçeve içinde bu kadarı kartı gereksiz uzatıyordu. */
.axil-product.product-style-four .product-content {
    margin-top: 14px;
    margin-bottom: 16px;
}

/* İndirim/yeni rozeti tema ayarında kutunun 10px dışına taşıyor; çerçeveli kartta
   kenarlığın üstüne binmesin diye içeri alınır. */
.axil-product.product-style-four > .thumbnail .label-block.label-right {
    right: 0;
}

/* Ad bir ya da iki satır olabildiği için kartın alt bloğu da kayıyordu; iki satırlık
   yer ayrılır, daha uzun adlar yine tamamen görünür. */
.axil-product .product-content .title {
    line-height: 1.4;
    min-height: 2.8em;
}

.axil-product .product-brand {
    display: block;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ufo-muted);
    margin-bottom: 4px;
}

.axil-product .product-content .product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.axil-product .product-content .product-rating .fa-star {
    color: #f0a800;
    font-size: 12px;
}

.axil-product .label-left {
    left: 15px;
    right: auto;
}

.axil-product .product-badget.bg-danger {
    background-color: var(--ufo-danger);
    color: #fff;
}

.axil-product .cart-action .disabled {
    opacity: .5;
    pointer-events: none;
}

.js-favorite-toggle.is-favorite i,
.js-favorite-toggle.is-favorite {
    color: var(--ufo-danger);
}

/* ---------- Arama önerileri ---------- */
/* Tema, öneri satırındaki görsele hiçbir ölçü vermiyor; yalnızca 479px altında
   60px genişlik tanımlı. Demo görselleri küçük olduğu için sorun çıkmıyordu ama
   tedarikçi fotoğrafları büyük geldiğinden satırlar dev görsellerle açılıyordu.
   Görsel her ekranda sabit kare kutuya oturur ve ürün kartlarındaki gibi
   "contain" ile içine sığdırılır. */
.header-search-modal .psearch-results .axil-product-list .thumbnail {
    flex: 0 0 auto;
    width: 90px;
    margin-right: 20px;
}

.header-search-modal .psearch-results .axil-product-list .thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 6px;
}

/* 575px altında tema satırı blok yapıp ortalıyor, modal içindeki kural yeniden
   yan yana diziyor; görsel kutusu orada da küçülür. */
@media only screen and (max-width: 575px) {
    .header-search-modal .psearch-results .axil-product-list .thumbnail {
        width: 70px;
        margin-right: 15px;
    }
}

/* ---------- Header ---------- */
.header-top-info .phone-link {
    white-space: nowrap;
    font-weight: 500;
}

/* Sepet rozeti. Tema 22x22 sabit bir daire veriyor; adet iki basamağı geçince
   sayı kutuya sığmayıp okunmaz oluyordu. Rozet içeriğe göre genişleyen bir hap
   biçimini alır, tek basamakta yine daire görünür. Sağ kenara sabitli olduğu
   için büyürken sola doğru açılır, header'ı taşırmaz. */
.header-action .shopping-cart .cart-dropdown-btn .cart-count {
    width: auto;
    min-width: 22px;
    padding: 0 6px;
    line-height: 18px;
    border-radius: 11px;
}

.axil-search {
    position: relative;
    flex: 1;
}

/* İç sayfa header'ında (header-style-5) logo, menü barının içinde yer alır.
   Tema bu alanı ~40px yüksekliğinde bir logo için tasarladığından, proje logosu
   burada sınırlanır; sınırlanmazsa menü satırını taşırıp maddeleri alt alta iter.
   Anasayfa header'ı (header-style-2) etkilenmez, logosu kendi sütununda kalır. */
.header-style-5 .axil-mainmenu .header-brand a img {
    max-height: 90px;
    width: auto;
}

/* İç sayfa üst barının zemini koyudur; telefon bağlantısı zemine karışmasın diye
   temanın bu bardaki bağlantılar için kullandığı açık renge (#c2c2cc) hizalanır. */
.header-style-5 .axil-header-top .phone-link {
    white-space: nowrap;
    font-weight: 500;
    color: #c2c2cc;
}

.header-style-5 .axil-header-top .phone-link:hover {
    color: var(--color-primary);
}

/* ---------- Ürün grupları mega menüsü ---------- */
/* Sütunları temanın kendi grid'i kurar (bkz. Components/CategoryMenu/Default.cshtml).
   Burada yalnızca satır arası boşluk ve alt kategorisi olmayan maddenin adet satırı
   düzenlenir; temanın listeye verdiği 30px alt boşluk grid boşluğuyla çakışıyordu. */
.header-department .department-megamenu .department-submenu-wrap {
    row-gap: 26px;
    align-items: start;
}

.header-department .department-megamenu .department-submenu ul {
    margin-bottom: 0;
}

/* Başlıklar dar sütunda kelime ortasından bölünmesin. */
.header-department .department-megamenu .department-submenu .submenu-heading {
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
}

.header-department .department-megamenu .department-submenu .submenu-count {
    display: block;
    font-size: 13px;
    color: var(--ufo-muted);
}

/* ---------- Mağaza filtre paneli ---------- */
.axil-shop-sidebar .toggle-list {
    border-bottom: 1px solid var(--ufo-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.axil-shop-sidebar .toggle-list .title {
    font-size: 14px;
    letter-spacing: .06em;
    margin-bottom: 15px;
}

.axil-shop-sidebar .brand-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    font-size: 15px;
}

/* Ürün adedi rozetleri "count" sınıfını KULLANAMAZ: tema main.js içinde $('.count')
   seçtiği her elemanı sayaç animasyonuna sokar, counterup.js de metni parseFloat ile
   okur. "(3)" sayıya çevrilemediği için ekrana NaN yazılırdı. */
.axil-shop-sidebar .brand-check .filter-count {
    margin-left: auto;
    color: var(--ufo-muted);
    font-size: 13px;
}

/* Seçili kategori. Seçici bilerek uzun: temanın
   ".axil-shop-sidebar .product-categories ul li a { color: var(--color-body) }" kuralı
   daha yüksek özgüllükte olduğu için daha kısa yazılan renk uygulanmıyordu. */
.axil-shop-sidebar .product-categories ul li.current-cat > a {
    font-weight: 600;
    color: var(--color-primary, #1a1a1a);
}

/* Tema, ana ve alt kategorilere aynı puntoyu (14px/500) verdiği için liste düz görünüyordu.
   Yalnızca üst seviye maddeler (ul.children içinde olmayanlar) büyütülüp kalınlaştırılır;
   alt kategoriler tema değerlerinde kalır, böylece hiyerarşi okunur. */
.axil-shop-sidebar .product-categories .shop-submenu > ul > li > a {
    font-size: 16px;
    font-weight: 600;
}

/* Vurgu kategori adında kalsın; adet rozeti normal puntoda devam eder. */
.axil-shop-sidebar .product-categories .shop-submenu > ul > li > a .filter-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--ufo-muted);
}

/* Alt kategoriler içeri girsin. Seçici bilerek uzun: temanın
   ".axil-shop-sidebar .toggle-list ul { padding: 0 }" kuralı daha yüksek özgüllükte
   olduğu için daha kısa bir seçiciyle yazılan girinti uygulanmıyordu. */
.axil-shop-sidebar .product-categories ul.children {
    padding-left: 18px;
}

.axil-shop-sidebar .price-hint {
    font-size: 13px;
    color: var(--ufo-muted);
    margin-top: 10px;
    margin-bottom: 0;
}

.filter-actions .axil-btn {
    display: block;
    text-align: center;
}

/* ---------- Anasayfa görsel slider ---------- */
/* Tema slaytı metin + görsel olarak iki sütuna böler ve gri bir kutu içine alır.
   Bizim afişlerde başlık, açıklama ve buton görselin içinde hazır geldiği için
   slayt tek parça görsele indirgenir; kutunun dolgusu ve zemini kaldırılır. */
.ufo-image-slider .slider-box-wrap {
    padding: 0;
    background-color: transparent;
    border-radius: 8px;
}

.ufo-image-slider .single-slide {
    display: block;
}

.ufo-image-slider .single-slide > a,
.ufo-image-slider .single-slide > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}

.ufo-image-slider .single-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Tıklanabilir afişte hafif geri bildirim. */
.ufo-image-slider .slide-link img {
    transition: opacity .25s ease;
}

.ufo-image-slider .slide-link:hover img {
    opacity: .92;
}

/* Nokta göstergeleri görselin altında kalsın. */
.ufo-image-slider .slick-dots {
    bottom: -30px;
}

/* ---------- Sayfalama ---------- */
.axil-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.axil-pagination li a,
.axil-pagination li .dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ufo-border);
    border-radius: 6px;
    color: inherit;
    transition: all .2s ease;
}

.axil-pagination li a:hover,
.axil-pagination li.active a {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* ---------- Varyant seçici (tema görünümü) ---------- */
/* Değerler "Tekli", "İkili" gibi kelimeler olabildiği için kutu genişliği içeriğe uyar. */
.single-product-modern .single-product-content .inner .range-variant li,
.range-variant li {
    width: auto;
    min-width: 40px;
    padding: 0 14px;
    text-transform: none;
}

/* Açık renkler (beyaz, krem) beyaz zeminde kaybolmasın. */
.color-variant li > span .color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Renk temadaki hazır sınıflardan değil ürün verisinden geldiği için seçili
   halkanın rengi burada verilir (tema bunu .color-extra-* sınıflarıyla yapar). */
.color-variant li.active > span {
    border-color: #1a1a1a;
}

/* Mevcut seçimle birlikte satışta bir kombinasyona karşılık gelmeyen değer. */
.range-variant li.is-unavailable {
    opacity: .45;
    text-decoration: line-through;
}

.color-variant li.is-unavailable {
    opacity: .35;
}

.ufo-variant-status {
    font-size: 13px;
    color: var(--ufo-muted);
    margin: 0 0 24px;
}

/* Sepet, ödeme ve sipariş ekranlarında seçilen kombinasyon. */
.cart-variant-name {
    font-size: 13px;
    color: var(--ufo-muted);
}

/* ---------- Sepet ---------- */
.axil-cart-table .stock-warning {
    color: var(--ufo-danger);
    font-size: 13px;
}

.axil-cart-table .price-warning {
    color: var(--ufo-warning);
    font-size: 13px;
}

.free-shipping-progress p,
.free-shipping-note {
    font-size: 14px;
    color: var(--ufo-muted);
    margin: 12px 0;
}

.minimum-order-note {
    font-size: 14px;
    color: var(--ufo-danger);
    margin: 12px 0;
}

.cart-content-wrap .item-quantity {
    font-size: 13px;
}

/* Asgari sepet tutarı sağlanmadığında ödeme düğmesi tıklanamaz görünür.
   Tema düğmesi Bootstrap'in .btn sınıfını kullanmadığı için .disabled
   kuralı burada ayrıca tanımlanır; tıklama ufo.js tarafında da kesilir. */
.axil-btn.disabled,
.axil-btn[aria-disabled="true"] {
    opacity: .55;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---------- Sipariş özeti tablosu (sepet ve ödeme) ---------- */
/* Tema hücrelere 180px'e varan min-width veriyor; iki sütun birlikte dar
   yan sütuna sığmadığı için tablo kutunun dışına taşıyordu. Etiket sütunu
   esner, tutar sütunu içeriği kadar yer kaplar. Seçiciler tema kurallarını
   (0,2,2 özgüllük) geçebilmek için bilerek uzun tutulmuştur. */
.axil-order-summery .summery-table {
    width: 100%;
    margin-bottom: 0;
    table-layout: auto;
}

.axil-order-summery .summery-table tbody td {
    min-width: 0;
    padding: 14px 0;
    vertical-align: middle;
}

.axil-order-summery .summery-table tbody td:first-child {
    padding-right: 12px;
    text-align: left;
}

/* Tema, kargo satırının tutarını sola yaslıyor; diğer satırlarla hizasız
   kalmasın diye tutar sütunu her satırda sağa yaslanır ve bölünmez. */
.axil-order-summery .summery-table tbody td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* ---------- Form alanları ---------- */
/* Tema .form-control'a sabit 60px yükseklik, <textarea>'ya da 60px satır yüksekliği
   veriyor. Bu yüzden adres ve not alanları rows="3" olmasına rağmen tek satıra
   sıkışıp diğer alanlardan küçük görünüyordu. Metin alanı satır sayısınca büyür,
   yatay dolgu ve çerçeve diğer alanlarla aynı kalır. */
textarea.form-control {
    height: auto;
    min-height: 60px;
    line-height: 1.6;
    padding: 16px 30px;
}

/* ---------- Ödeme ---------- */
.address-option,
.payment-option {
    display: block;
    cursor: pointer;
    margin-bottom: 12px;
}

.address-option input,
.payment-option input {
    position: absolute;
    opacity: 0;
}

.address-card,
.payment-card {
    display: block;
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    padding: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.address-option input:checked + .address-card,
.payment-option input:checked + .payment-card {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 1px #1a1a1a inset;
}

.address-card.is-default {
    border-color: var(--ufo-success);
}

/* ---------- Ürün detay ---------- */
.product-brand-label {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ufo-muted);
    margin-bottom: 8px;
}

.price-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0;
}

.price-block .price-old,
.single-product-content .price-old {
    text-decoration: line-through;
    color: var(--ufo-muted);
    font-size: 18px;
}

.price-block .price-save {
    background-color: var(--ufo-success);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 13px;
}

.shipping-info-list {
    list-style: none;
    padding: 0;
}

.shipping-info-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}

.shipping-info-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--ufo-success);
}

.reviews-wrapper .comment-list {
    list-style: none;
    padding: 0;
}

.reviews-wrapper .comment-body {
    border-bottom: 1px solid var(--ufo-border);
    padding: 18px 0;
}

.reviews-wrapper .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.reviews-wrapper .review-date {
    color: var(--ufo-muted);
    font-size: 13px;
}

.reviews-wrapper .star-rating .fa-star {
    color: #f0a800;
    font-size: 13px;
}

/* ---------- Hesabım ---------- */
.axil-dashboard-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--ufo-border);
    border-radius: 6px;
    margin-bottom: 8px;
    color: inherit;
    transition: all .2s ease;
}

.axil-dashboard-nav .nav-link:hover,
.axil-dashboard-nav .nav-link.active {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.dashboard-stat {
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    height: 100%;
}

.dashboard-stat .stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.dashboard-stat .stat-label {
    display: block;
    font-size: 13px;
    color: var(--ufo-muted);
    margin-top: 4px;
}

.order-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.order-badge.badge-warning { background-color: var(--ufo-warning); }
.order-badge.badge-info,
.order-badge.badge-primary { background-color: var(--ufo-info); }
.order-badge.badge-success { background-color: var(--ufo-success); }
.order-badge.badge-danger { background-color: var(--ufo-danger); }
.order-badge.badge-secondary { background-color: var(--ufo-muted); }

/* ---------- Sipariş tamamlandı ---------- */
.order-success-card .success-icon {
    font-size: 64px;
    color: var(--ufo-success);
    margin-bottom: 20px;
}

.order-summary-box {
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    padding: 30px;
}

/* ---------- Hakkımızda ---------- */
.about-feature-card {
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    padding: 30px 25px;
    height: 100%;
}

.about-feature-card i {
    font-size: 32px;
    margin-bottom: 15px;
    display: block;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

.contact-info-list li {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.contact-info-list li i {
    font-size: 20px;
    margin-top: 4px;
}

.contact-info-list strong {
    display: block;
    margin-bottom: 2px;
}

/* ---------- Boş durumlar / hata ---------- */
.empty-state i {
    opacity: .35;
}

.error-code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

/* ---------- Küçük butonlar ---------- */
.axil-btn.btn-sm {
    height: auto;
    padding: 8px 16px;
    font-size: 14px;
}

.axil-btn.btn-outline {
    border: 1px solid var(--ufo-border);
    background: transparent;
    color: inherit;
}

.axil-btn.btn-outline:hover {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
}

.axil-btn.btn-bg-danger {
    background-color: var(--ufo-danger);
    color: #fff;
}

.axil-btn:disabled,
.axil-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- Yönetim paneli ---------- */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: #f6f7f9;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: #1a1a1a;
    color: #fff;
    padding: 24px 0;
}

/* Marka logosu. Logonun "Elektrik" yazısı siyah olduğu için koyu kenar çubuğunda
   okunmaz; beyaz bir kutuya oturtulur. */
.admin-sidebar .brand {
    display: block;
    margin: 0 20px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.admin-sidebar .brand img {
    display: block;
    width: 100%;
    max-height: 64px;
    object-fit: contain;
    background-color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
}

.admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: rgba(255, 255, 255, .75);
    transition: all .2s ease;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.admin-sidebar .nav-link .badge-count {
    margin-left: auto;
    background-color: var(--ufo-danger);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    color: #fff;
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 24px 30px 60px;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.admin-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.admin-stat {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
}

.admin-stat .stat-label {
    display: block;
    font-size: 13px;
    color: var(--ufo-muted);
}

.admin-stat .stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
}

.admin-table {
    width: 100%;
    background: #fff;
}

.admin-table th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ufo-muted);
}

.admin-table td,
.admin-table th {
    padding: 12px;
    border-bottom: 1px solid var(--ufo-border);
    vertical-align: middle;
}

.admin-table img.thumb {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* ---------- Yönetim paneli: özet ekranı ----------
   Kartlar, grafikler ve listeler tek bir görsel dilde durur: beyaz kutu, ince
   kenarlık, yumuşak gölge. Grafikler dışarıdan kütüphane yüklenmeden doğrudan
   SVG olarak çizilir; geometrisi ChartHelpers içindedir. */
.admin-body {
    --dash-border: #e9ecf1;
    --dash-ink: #1f2430;
    --dash-muted: #7a8194;
    --dash-primary: #ed7a0f;
    --dash-success: #28a745;
    --dash-danger: #dc3545;
    --dash-info: #17a2b8;
    --dash-warning: #f0a800;
}

.dash-row {
    margin-bottom: 4px;
}

/* Bootstrap sütunu (flex öğesi) varsayılan olarak içeriğinin min-content
   genişliğinin altına inemez. Son siparişler tablosu yatay kaydırma için
   760px genişlikte olduğundan, sütun dar ekranda o ölçüye kilitlenip bütün
   sayfayı yatayda taşırıyordu. Sütunun küçülmesine izin verilir; tablo
   kendi kutusunun içinde kayar. */
.dash-row > [class*="col-"],
.dash-card {
    min-width: 0;
}

.dash-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 24px -18px rgba(24, 30, 45, .35);
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--dash-border);
}

.dash-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dash-ink);
    margin: 0;
}

.dash-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-muted);
}

.dash-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-primary);
    text-decoration: none;
}

.dash-link:hover {
    text-decoration: underline;
}

.dash-empty {
    margin: auto 0;
    padding: 24px 0;
    text-align: center;
    color: var(--dash-muted);
    font-size: 14px;
}

.dash-note {
    font-size: 13px;
    color: var(--dash-muted);
    margin-bottom: 14px;
}

/* --- Karşılama kartı --- */
.dash-greeting {
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #fff 40%, #fff6ec 100%);
}

.dash-greeting .greeting-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--dash-muted);
}

.dash-greeting .greeting-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dash-ink);
    margin: 4px 0 0;
}

/* Logo kartın sağ üstünde filigran gibi durur; metnin okunmasını engellemesin
   diye saydamlaştırılır ve tıklamayı yutmaması için pointer-events kapatılır. */
.dash-greeting .greeting-logo {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 92px;
    opacity: .14;
    pointer-events: none;
}

.dash-greeting .greeting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12px;
    color: var(--dash-muted);
}

.dash-greeting .greeting-meta i {
    margin-right: 4px;
    color: var(--dash-primary);
}

/* --- Sayı kartları --- */
.dash-stat .stat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.dash-stat .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--dash-muted);
}

.dash-stat .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 15px;
}

.stat-icon.tone-primary {
    background-color: rgba(237, 122, 15, .12);
    color: var(--dash-primary);
}

.stat-icon.tone-success {
    background-color: rgba(40, 167, 69, .12);
    color: var(--dash-success);
}

.stat-icon.tone-info {
    background-color: rgba(23, 162, 184, .12);
    color: var(--dash-info);
}

.dash-stat .stat-value {
    display: block;
    margin-top: 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dash-ink);
    /* Uzun tutarlar dar sütunda kartı taşırmasın. */
    overflow-wrap: anywhere;
}

.dash-stat .stat-trend {
    display: block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 600;
}

.dash-stat .stat-trend-note {
    font-weight: 400;
    color: var(--dash-muted);
}

.stat-trend.trend-up {
    color: var(--dash-success);
}

.stat-trend.trend-down {
    color: var(--dash-danger);
}

.stat-trend.trend-flat {
    color: var(--dash-muted);
}

/* --- Halka grafik --- */
.donut-wrap {
    position: relative;
    width: 180px;
    max-width: 100%;
    margin: 0 auto 18px;
}

.donut {
    display: block;
    width: 100%;
    height: auto;
    /* Dilimler saat 12 yönünden başlasın. */
    transform: rotate(-90deg);
}

.donut circle {
    fill: none;
    stroke-width: 14;
}

.donut .donut-track {
    stroke: #f1f3f6;
}

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-center .donut-label {
    font-size: 12px;
    color: var(--dash-muted);
}

.donut-center .donut-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--dash-ink);
}

.dash-legend {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.dash-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--dash-muted);
}

.dash-legend .legend-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
}

.dash-legend .legend-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-legend .legend-value {
    font-weight: 700;
    color: var(--dash-ink);
}

/* --- Haftalık çubuklar --- */
.week-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.week-bars li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.week-bars .week-day {
    width: 34px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-muted);
    text-transform: capitalize;
}

.week-bars .week-track {
    flex: 1;
    height: 8px;
    border-radius: 20px;
    background-color: #f1f3f6;
    overflow: hidden;
}

.week-bars .week-fill {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #f6a94f, var(--dash-primary));
}

.week-bars .week-count {
    width: 28px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-ink);
}

.week-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-muted);
}

.week-footer i {
    color: var(--dash-primary);
    margin-right: 4px;
}

/* --- Satış raporu --- */
.dash-tabs {
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    background-color: #f4f5f8;
}

.dash-tabs button {
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-muted);
    transition: all .2s ease;
}

.dash-tabs button.active {
    background-color: #fff;
    color: var(--dash-ink);
    box-shadow: 0 2px 6px rgba(24, 30, 45, .1);
}

.sales-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-bottom: 18px;
}

.sales-summary-label {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.sales-summary-value {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dash-ink);
}

.sales-summary-value i {
    margin-right: 6px;
    font-size: 14px;
    color: var(--dash-primary);
}

.sales-chart {
    margin-top: auto;
}

/* Grafik kutuya yayılır; çizgi kalınlığı bozulmasın diye yol
   "vector-effect: non-scaling-stroke" ile çizilir (bkz. Dashboard/Index.cshtml). */
.sales-chart svg {
    display: block;
    width: 100%;
    height: 170px;
}

.sales-chart .sales-line {
    fill: none;
    stroke: var(--dash-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-axis {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--dash-muted);
}

.sales-axis span {
    white-space: nowrap;
}

/* --- Çok satan ürünler --- */
.top-products {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-products li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dash-border);
}

.top-products li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.top-products img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    padding: 4px;
    background: #fff;
}

.top-product-info {
    flex: 1;
    min-width: 0;
}

.top-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-ink);
    /* Uzun ürün adları satırı bozmasın; iki satırda kesilir. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-product-brand {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.top-product-figure {
    flex-shrink: 0;
    min-width: 74px;
    text-align: right;
}

.top-product-figure .figure-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-ink);
    white-space: nowrap;
}

.top-product-figure .figure-label {
    display: block;
    font-size: 11px;
    color: var(--dash-muted);
}

/* --- Şehir listesi --- */
.city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.city-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.city-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-ink);
}

.city-revenue {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-primary);
    white-space: nowrap;
}

.city-track {
    display: block;
    height: 6px;
    border-radius: 20px;
    background-color: #f1f3f6;
    overflow: hidden;
}

.city-fill {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #f6a94f, var(--dash-primary));
}

.city-count {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--dash-muted);
}

/* --- Hareket akışı --- */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-feed li {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

/* İkonları birleştiren dikey çizgi; son satırda kesilir. */
.activity-feed li::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 15px;
    width: 1px;
    background-color: var(--dash-border);
}

.activity-feed li:last-child {
    padding-bottom: 0;
}

.activity-feed li:last-child::before {
    display: none;
}

.activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 13px;
}

.activity-icon.tone-primary {
    background-color: rgba(237, 122, 15, .12);
    color: var(--dash-primary);
}

.activity-icon.tone-success {
    background-color: rgba(40, 167, 69, .12);
    color: var(--dash-success);
}

.activity-icon.tone-info {
    background-color: rgba(23, 162, 184, .12);
    color: var(--dash-info);
}

.activity-icon.tone-warning {
    background-color: rgba(240, 168, 0, .14);
    color: var(--dash-warning);
}

.activity-body {
    min-width: 0;
}

.activity-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-ink);
}

.activity-title a {
    color: inherit;
    text-decoration: none;
}

.activity-title a:hover {
    color: var(--dash-primary);
}

.activity-desc,
.activity-date {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.activity-date {
    margin-top: 2px;
    font-size: 11px;
}


/* --- Türkiye haritası (Şehirlere Göre Ciro) ---
   Harita SVG'si ayrı bir dosyadan çekilip karta gömülür (bkz. ufo-admin.js).
   İller ciroya göre 1-5 arası bir yoğunluk basamağı alır; renkler burada. */
.tr-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.tr-map-canvas {
    position: relative;
    min-width: 0;
}

.tr-map-canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

.tr-map-loading {
    padding: 60px 0;
    text-align: center;
    font-size: 14px;
    color: var(--dash-muted);
}

/* İl yüzeyleri. Dolgu <g> üzerinde tanımlanır, path'ler devralır. */
.tr-map-canvas svg g[data-city-code] {
    fill: #eef0f4;
    stroke: #fff;
    stroke-width: 1;
    cursor: pointer;
    transition: fill .15s ease;
}

.tr-map-canvas svg g[data-city-code] path {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
}

/* Ciro yoğunluğu. Marka turuncusunun beş kademesi. */
.tr-map-canvas svg g[data-level="1"] { fill: #fde4c8; }
.tr-map-canvas svg g[data-level="2"] { fill: #f9c48c; }
.tr-map-canvas svg g[data-level="3"] { fill: #f4a24d; }
.tr-map-canvas svg g[data-level="4"] { fill: #ed7a0f; }
.tr-map-canvas svg g[data-level="5"] { fill: #c05f06; }

.tr-map-canvas svg g[data-city-code]:hover {
    fill: #1f2430;
}

/* Seçili il, imleç başka yere gitse de vurgulu kalır. */
.tr-map-canvas svg g[data-city-code].is-selected {
    fill: #1f2430;
}

/* --- Yan panel --- */
.tr-map-side {
    min-width: 0;
    border-left: 1px solid var(--dash-border);
    padding-left: 24px;
}

.tr-map-panel {
    display: none;
}

.tr-map-panel.is-active {
    display: block;
}

.tr-map-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dash-ink);
    margin: 0 0 14px;
}

.tr-map-subtitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dash-muted);
    margin: 0 0 10px;
}

.tr-map-totals {
    display: flex;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--dash-border);
}

.tr-map-total-label {
    display: block;
    font-size: 12px;
    color: var(--dash-muted);
}

.tr-map-total-value {
    display: block;
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    color: var(--dash-ink);
}

.tr-map-back {
    margin-top: 14px;
    padding: 6px 14px;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-muted);
    transition: all .2s ease;
}

.tr-map-back:hover {
    border-color: var(--dash-primary);
    color: var(--dash-primary);
}

.tr-map-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dash-muted);
}

.tr-map-note i {
    color: var(--dash-warning);
    margin-right: 4px;
}

/* --- Renk ölçeği --- */
.tr-map-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dash-border);
    font-size: 11px;
    color: var(--dash-muted);
}

.tr-map-legend-step {
    width: 26px;
    height: 8px;
    border-radius: 2px;
}

.tr-map-legend-step[data-level="1"] { background-color: #fde4c8; }
.tr-map-legend-step[data-level="2"] { background-color: #f9c48c; }
.tr-map-legend-step[data-level="3"] { background-color: #f4a24d; }
.tr-map-legend-step[data-level="4"] { background-color: #ed7a0f; }
.tr-map-legend-step[data-level="5"] { background-color: #c05f06; }

@media (max-width: 1199px) {
    /* Dar ekranda panel haritanın altına iner. */
    .tr-map {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-map-side {
        border-left: 0;
        border-top: 1px solid var(--dash-border);
        padding-left: 0;
        padding-top: 20px;
    }
}
/* Özet ekranındaki tablo kartın kenarlığına yaslanmasın. */
.dash-card .admin-table td:first-child,
.dash-card .admin-table th:first-child {
    padding-left: 0;
}

.dash-card .admin-table td:last-child,
.dash-card .admin-table th:last-child {
    padding-right: 0;
}

.dash-card .admin-table tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 575px) {
    .dash-card {
        padding: 16px;
    }

    .dash-legend {
        grid-template-columns: 1fr;
    }

    .sales-summary {
        gap: 12px 20px;
    }

    .sales-summary-value {
        font-size: 16px;
    }

    /* Dar ekranda ürün satırındaki üç rakamdan yalnızca tutar kalır. */
    .top-products .top-product-figure:not(:last-child) {
        display: none;
    }

    .sales-axis span:nth-child(even) {
        display: none;
    }
}
/* İl/ilçe ekranında ilçeleri gösterilen il vurgulanır. */
.admin-table tr.is-selected > td {
    background-color: rgba(237, 122, 15, .07);
}

.admin-table tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--dash-primary, #ed7a0f);
}


/* ---------- Yönetim paneli: ödeme akışı ----------
   Tek bir ödemenin adımları dikey bir çizgi üzerinde sıralanır; hatalı adım
   kırmızı noktayla işaretlenir. */
.pay-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pay-timeline li {
    position: relative;
    padding: 0 0 20px 26px;
}

/* Adımları birleştiren dikey çizgi; son adımda kesilir. */
.pay-timeline li::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 5px;
    width: 1px;
    background-color: var(--dash-border, #e9ecf1);
}

.pay-timeline li:last-child {
    padding-bottom: 0;
}

.pay-timeline li:last-child::before {
    display: none;
}

.pay-step-dot {
    position: absolute;
    top: 6px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--dash-primary, #ed7a0f);
}

.pay-timeline li.is-error .pay-step-dot {
    background-color: var(--ufo-danger, #dc3545);
}

.pay-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pay-timeline li.is-error .pay-step-head strong {
    color: var(--ufo-danger, #dc3545);
}

.pay-step-time {
    font-size: 12px;
    color: var(--dash-muted, #7a8194);
    white-space: nowrap;
}

.pay-step-message {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--dash-muted, #7a8194);
}

.pay-step-detail {
    margin-top: 8px;
}

.pay-step-detail summary {
    font-size: 12px;
    color: var(--dash-primary, #ed7a0f);
    cursor: pointer;
}

/* Ham gövde uzun olabilir; kendi kutusunda kaydırılır. */
.pay-step-detail pre {
    margin: 8px 0 0;
    padding: 12px;
    max-height: 260px;
    overflow: auto;
    background-color: #f6f7f9;
    border: 1px solid var(--dash-border, #e9ecf1);
    border-radius: 6px;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

.pay-summary {
    margin: 0;
}

.pay-summary dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-muted, #7a8194);
}

.pay-summary dd {
    margin: 2px 0 12px;
    font-size: 14px;
    color: var(--dash-ink, #1f2430);
    word-break: break-all;
}
/* ---------- Yönetim paneli: görsel yükleme ---------- */
.image-field-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    height: 140px;
    padding: 6px;
    margin-bottom: 8px;
    border: 1px dashed var(--ufo-border);
    border-radius: 8px;
    background-color: #fafafa;
}

.image-field-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-field-empty {
    font-size: 13px;
    color: var(--ufo-muted);
}

.image-field-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.image-field-status {
    font-size: 12px;
    color: var(--ufo-muted);
    margin-top: 4px;
}

.image-field-status.is-error {
    color: var(--ufo-danger);
}

/* Renk (seçenek) görselleri: değer başına tek kart. */
.option-image-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    background-color: #fafafa;
}

.option-image-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

.option-image-box .js-image-preview {
    width: 56px;
    height: 56px;
}

/* Varyant satırındaki kompakt biçim. */
.image-field--sm {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.image-field--sm .js-image-preview {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border: 1px solid var(--ufo-border);
    border-radius: 4px;
}

.image-field--sm .image-field-status {
    flex-basis: 100%;
    margin-top: 0;
}

/* ---------- Yönetim paneli: ürün görsel galerisi ---------- */
.image-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.image-gallery-items:empty {
    display: none;
}

.image-gallery-item {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--ufo-border);
    border-radius: 8px;
    background-color: #fff;
}

.image-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-gallery-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 2px 0;
    border-radius: 0 0 7px 7px;
    background-color: #1a1a1a;
    color: #fff;
    font-size: 11px;
    text-align: center;
}

.image-gallery-tools {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .2s ease;
}

.image-gallery-item:hover .image-gallery-tools {
    opacity: 1;
}

.image-gallery-tools button {
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    border: 1px solid var(--ufo-border);
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
}

.image-gallery-tools button:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* ---------- Yönetim paneli: mobil ---------- */
/* Menü açma düğmesi ve karartma yalnızca küçük ekranda görünür. */
.admin-menu-toggle,
.admin-sidebar-backdrop {
    display: none;
}

.admin-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-topbar-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991px) {
    /* Kenar çubuğu yandan açılan çekmeceye dönüşür. */
    .admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 260px;
        max-width: 82vw;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .admin-sidebar.is-open {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background-color: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .admin-sidebar-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Çekmece açıkken arka plan kaydırılmaz. */
    body.admin-menu-open {
        overflow: hidden;
    }

    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--ufo-border);
        border-radius: 8px;
        background-color: #fff;
        font-size: 18px;
        color: #1a1a1a;
    }

    .admin-content {
        padding: 16px 16px 48px;
    }

    /* Başlık çubuğu sayfa kaydırılırken üstte kalır; menüye her an erişilir. */
    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        padding: 12px 14px;
        margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    }

    .admin-topbar-actions {
        gap: 10px !important;
    }

    /* Kullanıcı adı ve "Siteyi Görüntüle" yazısı yerine ikon yeter. */
    .admin-topbar-actions .user-name,
    .admin-topbar-actions .label {
        display: none;
    }

    .admin-card {
        padding: 16px;
        margin-bottom: 16px;
    }

    /* Liste üstündeki arama/filtre formları tam genişlik kullanır. */
    .admin-card form.d-flex {
        width: 100%;
    }

    .admin-card form.d-flex .form-control,
    .admin-card form.d-flex .form-select {
        min-width: 0 !important;
        flex: 1 1 auto;
    }

    /* Tablolar yatay kaydırılır; sütunlar sıkışıp okunmaz hale gelmez. */
    .table-responsive .admin-table {
        min-width: 760px;
    }

    .table-responsive {
        margin-inline: -4px;
    }

    /* Site ayarlarındaki sekmeler alt alta düşmek yerine yana kaydırılır. */
    .admin-card .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .admin-card .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 575px) {
    .admin-topbar-title h1 {
        font-size: 17px;
    }

    .admin-stat {
        padding: 16px;
    }
}

/* ---------- Onay kutuları ---------- */
/* Tema gerçek kutuyu gizler (opacity:0) ve görseli KARDEŞ <label> üzerinden çizer.
   Kutunun <label> içine sarıldığı yerlerde (mağaza filtreleri) o görsel hiç oluşmadığı
   için kutu görünmez kalıyordu; oralarda tarayıcının kendi kutusu geri getirilir. */
.axil-shop-sidebar label input[type="checkbox"],
.axil-shop-sidebar label input[type="radio"] {
    opacity: 1;
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1a1a1a;
    flex: 0 0 auto;
}

/* Tema, .form-group içindeki her <label>'ı "kayan etiket" yapıyor
   (position: absolute; pointer-events: none). Onay kutusunun görseli de label
   üzerinden çizildiği için üyelik, giriş ve adres formlarındaki kutular ne
   görünüyor ne de tıklanabiliyordu; bu kapsamda label normale döndürülür. */
.form-group .form-check .form-check-label {
    position: relative;
    top: auto;
    left: auto;
    pointer-events: auto;
    z-index: auto;
    background: rgba(0, 0, 0, 0);
    margin-bottom: 0;
    padding: 0 0 0 28px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-body);
    cursor: pointer;
}

/* Aynı kapsamda gizli kutu, ".form-group input" kuralıyla 50px yüksekliğinde
   bir metin kutusuna dönüşüp komşu alanların üstüne biniyor. */
.form-group .form-check .form-check-input {
    height: 16px;
    padding: 0;
    border: 0 none;
}

/* =====================================================================
   Mobil düzen
   Tema geniş ekrana göre kurgulanmış; küçük ekranda üst bar üç satıra
   düşüyor, tanıtım şeritleri sayfayı uzatıyor ve ürün kartındaki
   "sepete ekle" yalnızca hover ile açıldığı için dokunmatikte görünmüyordu.
   ===================================================================== */

/* Ürün kartı: ikon masaüstünde gizli, metin görünür. */
.axil-product .cart-action li.select-option a > i {
    display: none;
}

@media (max-width: 767px) {
    /* Anasayfa/footer'da mobilde gösterilmeyen bölümler. */
    .ufo-hide-mobile {
        display: none !important;
    }

    /* Bölüm sırası: slider -> ürünler -> kategoriler. */
    .home-sections {
        display: flex;
        flex-direction: column;
    }

    .home-sections > .ufo-order-last {
        order: 1;
    }

    /* Üst bar tek satıra iner ve ortalanır. */
    .header-top-campaign .quick-link,
    .header-style-5 .axil-header-top .quick-link {
        justify-content: center;
        margin: 0;
    }

    .header-top-campaign .header-top-link,
    .header-style-5 .axil-header-top .header-top-link {
        float: none !important;
        text-align: center;
    }

    .header-top-campaign .container,
    .header-style-5 .axil-header-top .container {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Arama kutusu mobilde ikonun arkasında olduğundan logo satırı daraltılır. */
    .header-style-2 .axil-header-top {
        padding: 8px 0;
    }

    .header-style-2 .header-brand img,
    .header-style-5 .axil-mainmenu .header-brand a img {
        max-height: 46px;
        width: auto;
    }

    /* Slider görseli tam genişlik, boşluklar daraltılır. */
    .ufo-image-slider .slider-offset-left {
        padding: 0;
    }

    .axil-section-gap {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-title-wrapper {
        margin-bottom: 20px;
    }
}

/* Dokunmatik ekranlarda hover olmadığı için kart eylemleri hep görünür
   ve "sepete ekle" yazı yerine ikon olur (yan yana üç yuvarlak düğme). */
@media (hover: none), (max-width: 767px) {
    .axil-product .product-hover-action {
        opacity: 1;
        visibility: visible;
        bottom: 10px;
    }

    .axil-product .cart-action li.select-option a {
        width: 40px;
        padding: 0;
        text-align: center;
        line-height: 40px;
        background-color: var(--color-primary, #e9531b);
    }

    .axil-product .cart-action li.select-option a::before {
        background-color: var(--color-primary, #e9531b);
    }

    .axil-product .cart-action li.select-option a > i {
        display: inline-block;
        font-size: 15px;
    }

    .axil-product .cart-action li.select-option a .action-label {
        display: none;
    }

    .axil-product .cart-action li {
        margin: 4px;
    }
}

/* Telefonda kart iki sütuna düştüğü için düğmeler biraz küçülür. */
@media (max-width: 575px) {
    .axil-product .cart-action li.wishlist a,
    .axil-product .cart-action li.quickview a,
    .axil-product .cart-action li.select-option a {
        width: 34px;
        height: 34px;
        line-height: 34px;
    }

    .axil-product .cart-action li {
        margin: 3px;
    }
}

/* =====================================================================
   Form alanları (yalnızca müşteri arayüzü; yönetim paneli Bootstrap kullanır)
   Tema, input kenarlığını tanımlanmamış bir değişkenle veriyor
   ("border: var(--border-width) solid var(--color-border)"). Değişken hiçbir
   yerde tanımlı olmadığı için kural geçersiz kalıyor ve alanlar beyaz zeminde
   sınırsız görünüyordu. Marka rengiyle uyumlu ince bir kenarlık verilir.
   ===================================================================== */
body:not(.admin-body) input[type="text"],
body:not(.admin-body) input[type="email"],
body:not(.admin-body) input[type="password"],
body:not(.admin-body) input[type="tel"],
body:not(.admin-body) input[type="number"],
body:not(.admin-body) input[type="search"],
body:not(.admin-body) input[type="date"],
body:not(.admin-body) textarea,
body:not(.admin-body) select,
body:not(.admin-body) .form-control,
body:not(.admin-body) .form-select {
    border: 1px solid rgba(237, 122, 15, .28);
    border-radius: 6px;
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body:not(.admin-body) input[type="text"]:hover,
body:not(.admin-body) input[type="email"]:hover,
body:not(.admin-body) input[type="password"]:hover,
body:not(.admin-body) input[type="tel"]:hover,
body:not(.admin-body) input[type="number"]:hover,
body:not(.admin-body) textarea:hover,
body:not(.admin-body) select:hover,
body:not(.admin-body) .form-control:hover,
body:not(.admin-body) .form-select:hover {
    border-color: rgba(237, 122, 15, .55);
}

body:not(.admin-body) input[type="text"]:focus,
body:not(.admin-body) input[type="email"]:focus,
body:not(.admin-body) input[type="password"]:focus,
body:not(.admin-body) input[type="tel"]:focus,
body:not(.admin-body) input[type="number"]:focus,
body:not(.admin-body) input[type="search"]:focus,
body:not(.admin-body) input[type="date"]:focus,
body:not(.admin-body) textarea:focus,
body:not(.admin-body) select:focus,
body:not(.admin-body) .form-control:focus,
body:not(.admin-body) .form-select:focus {
    border-color: var(--color-primary, #ed7a0f);
    box-shadow: 0 0 0 3px rgba(237, 122, 15, .12);
    outline: none;
}


/* Aynı formdaki alanlar aynı puntoda görünsün.
   Tema kök font boyutunu 10px'e çekiyor (style.min.css: "html{font-size:10px}"),
   Bootstrap'in ".form-control" kuralı ise "font-size: 1rem" veriyor -- yani 10px.
   <input> alanları bundan etkilenmiyor, çünkü "input[type=email]" seçicisi
   ".form-control"dan daha belirgin ve temanın 14px'lik kuralı geçerli kalıyor.
   <select> ve <textarea> ise element seçicisiyle tanımlandığı için yeniliyor ve
   10px'e düşüyordu; sipariş formunda e-posta 14px iken il/ilçe, adres ve not
   alanları 10px görünüyordu. Burada hepsi input'larla aynı hizaya çekilir. */
body:not(.admin-body) select.form-control,
body:not(.admin-body) select.form-select,
body:not(.admin-body) textarea.form-control {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-heading, #292930);
}

/* Açılır listeler input yüksekliğine oturur (input yüksekliği kenarlıkla birlikte 62px).
   Tarayıcının kendi oku gizlenip yerine ok çizilir; temanın kullandığı görsel
   (assets/images/icons/arrow-icon.png) projede bulunmadığı için dosya
   bağımlılığı olmayan bir SVG tercih edildi. */
body:not(.admin-body) select.form-control,
body:not(.admin-body) select.form-select {
    height: 62px;
    padding: 0 46px 0 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23292930' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
}

/* Metin alanları rows değeri kadar büyür; yatay dolgu input'larla aynı kalır. */
body:not(.admin-body) textarea.form-control {
    padding: 16px 30px;
}
/* Doğrulama hatası olan alan kırmızı çerçeveyle işaretlenir. */
body:not(.admin-body) .input-validation-error,
body:not(.admin-body) .input-validation-error:focus {
    border-color: var(--ufo-danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

/* Adet kutusu ve header araması temanın kendi görünümünü korur. */
body:not(.admin-body) .pro-qty input,
body:not(.admin-body) .header-search-modal .form-control {
    border-color: rgba(0, 0, 0, .10);
}

body:not(.admin-body) .pro-qty input:focus,
body:not(.admin-body) .header-search-modal .form-control:focus {
    box-shadow: none;
}

/* ---------- SweetAlert bildirim/onay pencereleri ---------- */
/* SweetAlert bütün ölçülerini em ile verir. Tema kök yazı boyutunu %62,5'e
   (10px) çektiği için kutular ve düğmeler küçülüp alt alta düşüyordu;
   taban boyut geri verilerek özgün oranlar korunur. */
.swal2-popup {
    font-size: 16px;
}

.swal2-popup.swal2-toast {
    font-size: 14px;
}

.swal2-title {
    font-weight: 700;
}

.swal2-styled {
    border-radius: 6px;
    font-weight: 600;
}

/* Bildirimler yapışkan header'ın altında kalmasın. */
.swal2-container.swal2-top-end {
    z-index: 2000;
}

/* Tema, tüm button/input öğelerini "width:100%" yaptığı için SweetAlert
   düğmeleri alt alta düşüyordu; kutu içindeki düğmeler içeriğine göre ölçeklenir.
   Renkleri SweetAlert kendi değişkenleriyle verdiği için yalnızca genişlik sıfırlanır. */
.swal2-container button,
.swal2-container .swal2-styled {
    width: auto;
}

.swal2-container .swal2-close {
    background: none;
    border: none;
}

/* ---------- WhatsApp düğmesi ---------- */
/* Sağ altta sabit durur; "yukarı çık" düğmesiyle çakışmaması için onun üstünde konumlanır. */
.ufo-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 90px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 18px;
    border-radius: 27px;
    background-color: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ufo-whatsapp:hover,
.ufo-whatsapp:focus {
    background-color: #1fb855;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(37, 211, 102, .45);
}

.ufo-whatsapp i {
    font-size: 26px;
}

/* Küçük ekranda yalnızca ikon; yazı yer kaplamasın. */
@media (max-width: 767px) {
    .ufo-whatsapp {
        right: 16px;
        bottom: 76px;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .ufo-whatsapp-label {
        display: none;
    }
}