/**
 * Cordatus License Tab - Frontend Stilleri
 * Beyaz premium kart teması, yan yana yerleşim (sol metinler, sağ buton) ve renkli başlıklar.
 */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════
   KART - ANA SARICI
   ════════════════════════════════════════════════ */
.clt-card {
    --clt-accent:         #00b4d8;
    --clt-accent-dark:    color-mix(in srgb, var(--clt-accent) 80%, #000);
    --clt-accent-violet:  #7c3aed;
    /* Dinamik admin CSS değişkenleri */
    --clt-btn-color:      #7c3aed;
    --clt-btn2-color:     #00b4d8;
    --clt-card-bg:        #ffffff;
    --clt-card-border:    rgba(124, 58, 237, 0.15);
    --clt-title-color:    #7c3aed;
    --clt-desc-color:     #475569;
    --clt-badge-from:     #7c3aed;
    --clt-badge-to:       #00b4d8;
    --clt-badge-radius:   20px;
    --clt-price-color:    #7c3aed;
    --clt-desc-indent:    0px;
    --clt-btn-py:         6px;
    --clt-btn-px:         12px;
    
    --clt-border:         var(--clt-card-border);
    --clt-text:           #0f172a;
    --clt-text-muted:     #475569;
    --clt-radius:         16px;
    --clt-font:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    position:           relative;
    overflow:           hidden;
    margin:             12px 0;
    border-radius:      var(--clt-radius);
    border:             1px solid var(--clt-card-border);
    background:         var(--clt-card-bg);
    box-shadow:         0 10px 30px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 6%, transparent),
                        0 1px 3px rgba(0, 0, 0, 0.03);
    font-family:        var(--clt-font);
    transition:         box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    
    /* Ürün görselinin altında durmasını garantilemek için (Flex/Grid yapılarında) */
    order:              99;
    clear:              both;
    width:              100%;
    box-sizing:         border-box;
}

.clt-card:hover {
    border-color:       color-mix(in srgb, var(--clt-btn-color, #7c3aed) 20%, transparent);
    box-shadow:         0 16px 40px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 8%, transparent),
                        0 2px 8px  color-mix(in srgb, var(--clt-btn-color, #7c3aed) 4%, transparent);
    transform:          translateY(-2px);
}

/* ── Işıltı efekti (Arka planda çok hafif bir renk geçişi) ── */
.clt-card__glow {
    position:         absolute;

    top:              -80px;
    right:            -80px;
    width:            240px;
    height:           240px;
    border-radius:    50%;
    background:       radial-gradient(circle,
                          color-mix(in srgb, var(--clt-btn-color, #7c3aed) 6%, transparent) 0%,
                          color-mix(in srgb, var(--clt-btn2-color, #00b4d8) 2%, transparent) 50%,
                          transparent 85%);
    pointer-events:   none;
    animation:        clt-pulse 5s ease-in-out infinite;
}

@keyframes clt-pulse {
    0%, 100% { opacity: .6; transform: scale(1);    }
    50%      { opacity: 1;  transform: scale(1.15); }
}

/* ════════════════════════════════════════════════
   ÜST HEADER (LOGO ve ROZET)
   ════════════════════════════════════════════════ */
.clt-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         8px 18px;
    border-bottom:   1px solid #f1f5f9;
    position:        relative;
    z-index:         1;
}

.clt-card__logo-container {
    display:      flex;
    align-items:  center;
    height:       24px;
}

.clt-logo {
    width:      auto;
    height:     20px;
    max-width:  160px;
    object-fit: contain;
    transition: transform .3s ease;
}

/* Kutu arka planı beyaz olduğu için artık logoyu invert etmiyoruz, orijinal koyu renginde netçe duruyor */
.clt-logo[src*="cordatus_dark.png"] {
    filter:     drop-shadow(0 1px 2px rgba(0, 0, 0, 0.02));
}

.clt-card:hover .clt-logo {
    transform: scale(1.03);
}

/* ── Rozet (Hediye) ── */
.clt-badge {
    position:       relative;
    top:            0;
    right:          0;
    background:     linear-gradient(135deg, var(--clt-badge-from, #7c3aed), var(--clt-badge-to, #00b4d8));
    color:          #fff;
    font-family:    var(--clt-font);
    font-size:      8px;
    font-weight:    700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding:        var(--clt-badge-py, 3px) var(--clt-badge-px, 8px) !important;
    border-radius:  var(--clt-badge-radius, 20px) !important;
    box-shadow:     0 4px 10px color-mix(in srgb, var(--clt-badge-from, #7c3aed) 18%, transparent);
    animation:      clt-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes clt-badge-pop {
    from { transform: scale(0) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* ════════════════════════════════════════════════
   ALT GÖVDE
   ════════════════════════════════════════════════ */
.clt-card__body {
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    padding:         10px 18px 12px;
    position:        relative;
    z-index:         1;
}

.clt-card__text-wrap {
    flex:      1;
    min-width: 0;
}

/* Başlık + açıklama üstte */
.clt-card__title {
    font-family:  var(--clt-font) !important;
    font-size:    var(--clt-title-sz-d, 14px) !important;
    font-weight:  700 !important;
    color:        var(--clt-title-color, #7c3aed) !important;
    margin:       0 0 2px !important;
    padding:      0 !important;
    line-height:  1.3 !important;
    letter-spacing: .2px;
}

.clt-card__desc {
    font-family:  var(--clt-font) !important;
    font-size:    var(--clt-desc-sz-d, 14px) !important;
    color:        var(--clt-desc-color, #475569) !important;
    margin:       0 !important;
    padding-right: var(--clt-desc-indent-mobile, 0px) !important;
    line-height:  1.4 !important;
    text-align:   left !important;
}

@media (min-width: 768px) {
    .clt-card__desc {
        padding-right: var(--clt-desc-indent-desktop, var(--clt-desc-indent, 0px)) !important;
    }
}

/* Fiyat + Buton yan yana alt satır */
.clt-card__bottom {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             12px;
    margin-top:      2px;
}

/* ── Fiyat Satırı ── */
.clt-card__price {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    margin:      0 !important;
    flex-wrap:   wrap;
}

.clt-price-old {
    font-family:     var(--clt-font) !important;
    font-size:       var(--clt-old-price-sz-d, 13px) !important;
    color:           #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight:     500 !important;
}

.clt-price-new {
    font-family:  var(--clt-font) !important;
    font-size:    var(--clt-new-price-sz-d, 17px) !important;
    color:        var(--clt-price-color, #7c3aed) !important;
    font-weight:  700 !important;
    letter-spacing: -.3px;
}

/* ── İki butonlu actions sarucısı ── */
.clt-card__actions {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex-shrink:    0;
}

.clt-card__desc strong {
    color:       #0f172a !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════════════════
   BUTON
   ════════════════════════════════════════════════ */
.clt-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         var(--clt-btn-py, 6px) var(--clt-btn-px, 12px);
    background:      linear-gradient(135deg, var(--clt-btn-color, #7c3aed) 0%, var(--clt-btn2-color, #00b4d8) 100%);
    color:           #fff !important;
    font-family:     var(--clt-font) !important;
    font-size:       var(--clt-btn-sz-d, 11px) !important;
    font-weight:     600 !important;
    border:          none;
    border-radius:   50px;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      filter .25s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow:      0 4px 12px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 22%, transparent);
    letter-spacing:  .3px;
    flex-shrink:     0;
}

.clt-btn:hover,
.clt-btn:focus-visible {
    filter:    brightness(1.1);
    transform: translateX(3px);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 30%, transparent),
                0 4px 15px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 25%, transparent);
    outline:   none;
}

.clt-btn:active {
    transform: translateX(1px) scale(.98);
}

.clt-btn__icon {
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
    width:        14px;
    height:       14px;
    transition:   transform .25s ease;
}

.clt-btn:hover .clt-btn__icon {
    transform: translateX(3px);
}

.clt-btn__icon svg {
    width:  100%;
    height: 100%;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .clt-card {
        border-radius: 8px !important;
    }

    .clt-card__header {
        padding:        8px 12px;
    }

    .clt-card__body {
        flex-direction: column;
        align-items:    stretch;
        gap:            10px;
        padding:        10px 12px 12px;
    }

    .clt-logo {
        height:         16px;
    }

    .clt-card__title {
        font-size:      var(--clt-title-sz-m, 13px) !important;
        line-height:    1.25 !important;
        margin-bottom:  3px !important;
    }

    .clt-card__desc {
        font-size:      var(--clt-desc-sz-m, 13px) !important;
        line-height:    1.35 !important;
    }

    .clt-price-old {
        font-size:      var(--clt-old-price-sz-m, 12px) !important;
    }

    .clt-price-new {
        font-size:      var(--clt-new-price-sz-m, 15px) !important;
    }

    .clt-btn {
        width:           100%;
        justify-content: center;
        font-size:       var(--clt-btn-sz-m, 12px) !important;
        padding:         8px 16px !important;
    }

    .clt-link {
        width:           100%;
        justify-content: center;
        font-size:       var(--clt-btn-sz-m, 12px) !important;
        padding:         8px 16px !important;
    }

    .clt-card__bottom {
        flex-direction: column;
        align-items:    stretch;
        gap:            10px;
        margin-top:      6px;
    }

    .clt-card__price {
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════
   SEKMENİN AÇILMA ANİMASYONU
   ════════════════════════════════════════════════ */
.clt-tab-highlight {
    animation: clt-highlight-flash .8s ease-out;
}

@keyframes clt-highlight-flash {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--clt-btn-color, #7c3aed) 80%, transparent); }
    40%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--clt-btn-color, #7c3aed) 40%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--clt-btn-color, #7c3aed) 0%, transparent); }
}

/* ════════════════════════════════════════════════
   METİN LİNKİ TASARIMI (clt-link)
   ════════════════════════════════════════════════ */
.clt-link {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             6px !important;
    color:           var(--clt-btn-color, #7c3aed) !important;
    font-family:     var(--clt-font) !important;
    font-size:       var(--clt-btn-sz-d, 11px) !important;
    font-weight:     600 !important;
    text-decoration: underline !important;
    cursor:          pointer !important;
    background:      none !important;
    border:          none !important;
    padding:         var(--clt-btn-py, 6px) var(--clt-btn-px, 12px) !important;
    margin:          0 !important;
    outline:         none !important;
    box-shadow:      none !important;
    line-height:     normal !important;
    white-space:     nowrap !important;
    flex-shrink:     0 !important;
    appearance:      none !important;
    -webkit-appearance: none !important;
    transition:      color .2s ease, transform .2s ease !important;
    letter-spacing:  .3px !important;
}

.clt-link:hover,
.clt-link:focus-visible {
    color:           var(--clt-btn2-color, #00b4d8) !important;
    text-decoration: none !important;
    transform:       translateX(3px) !important;
    outline:         none !important;
}

.clt-link:active {
    transform:       translateX(1px) !important;
}

.clt-link__icon {
    display:         inline-flex !important;
    align-items:     center !important;
    flex-shrink:     0 !important;
    width:           14px !important;
    height:          14px !important;
    transition:      transform .25s ease !important;
}

.clt-link:hover .clt-link__icon {
    transform:       translateX(3px) !important;
}

.clt-link__icon svg,
.clt-link__icon img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      contain !important;
}

.clt-btn__icon img {
    width:           100% !important;
    height:          100% !important;
    object-fit:      contain !important;
}

/* ════════════════════════════════════════════════
   MOBİL VE TABLET GİZLEME (CSS)
   ════════════════════════════════════════════════ */

/* Mobil (Ekran genişliği 767px ve altı) */
@media (max-width: 767px) {
    .clt-card.clt-hide-mobile {
        display: none !important;
    }
    .clt-card__desc.clt-hide-desc-mobile {
        display: none !important;
    }
}

/* Tablet (Ekran genişliği 768px ile 1024px arası) */
@media (min-width: 768px) and (max-width: 1024px) {
    .clt-card.clt-hide-tablet {
        display: none !important;
    }
}