/* =========================================================
   COMPONENTS — Projenin her yerinde kullanılabilir
   bileşen sınıfları. Tema token'larını (main.css) kullanır.
   ========================================================= */


/* ── GLASS ──────────────────────────────────────────────
   Glass morphism yüzey. Herhangi bir elemana eklenebilir.
   Kullanım: <div class="glass"> ... </div>
   ──────────────────────────────────────────────────────── */

.glass {
    background: var(--nav-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur-webkit);
}


/* ── DROPDOWN ───────────────────────────────────────────
   Floating panel. Tetikleyici elemana relative verin,
   dropdown'a bu class'ı ekleyin.

   Kullanım:
     <div style="position:relative">
       <button>Trigger</button>
       <div class="dropdown">
         <div class="dropdown-list">
           <a class="dropdown-item">Item</a>
         </div>
       </div>
     </div>

   JS ile açmak için:
     display: block; opacity: 1; pointer-events: auto;
   ──────────────────────────────────────────────────────── */

.dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);

    min-width: 200px;
    max-height: 420px;

    opacity: 0;
    pointer-events: none;
    display: none;

    background: var(--dropdown-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur-webkit);

    border: 1px solid var(--dropdown-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);

    z-index: 1001;
    overflow: hidden;
}

/* Açık durum — JS tarafından tetiklenir */
.dropdown.is-open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* ── DROPDOWN LIST ──────────────────────────────────────
   Dropdown içindeki scrollable konteyner.
   ──────────────────────────────────────────────────────── */

.dropdown-list {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}


/* ── DROPDOWN ITEM ──────────────────────────────────────
   Dropdown içindeki her bir satır/link.
   Border-bottom 0.5px, hover'da scale(1.03).

   Kullanım:
     <a class="dropdown-item" href="...">Başlık</a>
   ──────────────────────────────────────────────────────── */

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);

    font-size: 13.5px;
    font-weight: 450;
    color: var(--text-primary);
    text-decoration: none;
    opacity: 0.85;

    transform: scale(1);
    transition:
        transform var(--duration-fast) var(--ease-out),
        opacity var(--duration-fast) ease,
        background var(--duration-fast) ease;
}

/* Araya 0.5px border */
.dropdown-item + .dropdown-item {
    border-top: 0.5px solid var(--card-border);
    border-radius: 0;
}

.dropdown-list > .dropdown-item:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.dropdown-list > .dropdown-item:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.dropdown-list > .dropdown-item:only-child {
    border-radius: var(--radius-sm);
}

/* Hover: büyüme + arka plan vurgusu */
.dropdown-item:hover {
    opacity: 1;
    transform: scale(1.03);
    background: var(--card-bg);
}

/* Active/press */
.dropdown-item:active {
    transform: scale(0.98);
}


/* ── SCROLLBAR THIN ─────────────────────────────────────
   4px ince scrollbar. İstediğiniz scrollable alana ekleyin.

   Kullanım:
     <div class="scrollbar-thin" style="overflow-y:auto">
   ──────────────────────────────────────────────────────── */

.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
}


/* ── BORDER RADIUS ──────────────────────────────────────
   Utility class'lar. Herhangi bir elemana eklenebilir.

   Kullanım:
     <div class="rounded-sm">  → 10px
     <div class="rounded-md">  → 16px
     <div class="rounded-lg">  → 24px
     <div class="rounded-xl">  → 32px
     <div class="rounded-full"> → 100px (pill)
     <div class="rounded-none"> → 0
   ──────────────────────────────────────────────────────── */

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-none { border-radius: 0; }


/* ── TEXT TRUNCATE ───────────────────────────────────────
   Taşan metni ... ile keser.

   Kullanım:
     <span class="text-truncate">Çok uzun metin...</span>
   ──────────────────────────────────────────────────────── */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── EXTERNAL LINK ARROW ────────────────────────────────
   Hover'da sağdan slide-in olan external link ikonu.
   Parent elemana :hover ekleyin.

   Kullanım:
     <a class="dropdown-item" href="..." target="_blank">
       <span>Site Adı</span>
       <svg class="icon-external">...</svg>
     </a>
   ──────────────────────────────────────────────────────── */

.icon-external {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--duration-fast) ease,
        transform var(--duration-fast) ease;
    color: var(--accent-blue);
}

.dropdown-item:hover .icon-external,
*:hover > .icon-external {
    opacity: 1;
    transform: translateX(0);
}