/*
 * ═══════════════════════════════════════════════════════════════════════════
 * TALIVIO TASARIM DİLİ — kesik köşe, gölge, dalgalanan mavi ışık
 *
 * Tek gerçek kaynak: talivio-ai/docs/tasarim-dili.md
 * Referans uygulama: ai.talivio.com (`resources/css/app.css`, Tailwind v4).
 * Bu dosya onun Tailwind v3 uyarlamasıdır.
 *
 * ⚠️ BU DOSYA DÜZ CSS'TİR — bilerek. Ne `@apply` ne `@tailwind` kullanır:
 *    - Tailwind'i CDN'den alan sayfalarda da (bu depolarda çoğu layout öyle
 *      yapıyor) aynen çalışsın diye,
 *    - ve v3'ün JIT taraması (`content:`) bu sınıfları HİÇ görmese bile CSS'e
 *      girsin diye. ai.talivio.com'da tam bu yaşandı: tarama listesinde olmayan
 *      dosyanın sınıfları derlenmedi, canlıda beyaz üstüne beyaz buton çıktı.
 *
 * ⚠️ DÖRT TUZAK (hepsi ai.talivio.com'da yaşandı):
 *   1. Gölge KIRPILAN elemana verilemez: `clip-path` elemanın kendi
 *      `box-shadow`/`drop-shadow`'unu da keser. Gölge HER ZAMAN sarmalayıcıda:
 *          <div class="lift"><div class="cut bg-white">…</div></div>
 *   2. Kırpılan kutu içindeki taşan her şeyi keser — açılır menü kırpılmış
 *      kartın İÇİNDE duramaz, dışarı taşınır.
 *   3. Koyu temada saf gölge görünmez (siyah üstüne siyah): ilk katman ince bir
 *      açık kenar ışığına döner.
 *   4. Odak halkası kırpılınca kaybolur: form alanlarında gölge `inset`.
 *
 * Koyu tema iki seçiciyle de çalışır: bu depoların bugün kullandığı `.dark`
 * sınıfı ve sözleşmenin `[data-theme='dark']` özniteliği.
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
    /* Talivio mavisi. Odak halkası ve marka gölgesi bunu kullanır. */
    --talivio-blue: #3087ce;
}

/* ───────── Kesik köşe: üst-sol ve alt-sağ kesilir, diğer ikisi keskin ───── */
.cut,
.cut-sm,
.cut-lg {
    clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );
}

.cut-sm { --cut: 8px; }  /* buton, çip, satır, giriş alanı */
.cut    { --cut: 14px; } /* kart, açılır menü, uyarı kutusu */
.cut-lg { --cut: 22px; } /* sayfanın ana kutusu */

/* ───────── Gölge: üç katman, ÇERÇEVE YERİNE ───────── */
.lift {
    filter:
        drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
        drop-shadow(0 4px 6px rgb(15 23 42 / 0.07))
        drop-shadow(0 16px 24px rgb(15 23 42 / 0.10));
}

.lift-sm {
    filter:
        drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
        drop-shadow(0 2px 4px rgb(15 23 42 / 0.06));
}

/* Marka renginde kalkış: birincil eylem gölgesiyle de öne çıksın. */
.lift-brand {
    filter:
        drop-shadow(0 1px 1px rgb(15 23 42 / 0.06))
        drop-shadow(0 8px 14px rgb(48 135 206 / 0.18))
        drop-shadow(0 26px 40px rgb(48 135 206 / 0.30));
}

/* Odaklanınca kalkış markaya döner: kırpılan kutuda odak halkası görünmediği
   için geri bildirim gölgeden gelir. */
.lift-focus:focus-within {
    filter:
        drop-shadow(0 1px 1px rgb(15 23 42 / 0.06))
        drop-shadow(0 8px 14px rgb(48 135 206 / 0.18))
        drop-shadow(0 26px 40px rgb(48 135 206 / 0.22));
}

/* ⚠️ Tuzak 3: koyu temada ilk katman açık kenar ışığına döner. */
.dark .lift,
[data-theme='dark'] .lift {
    filter:
        drop-shadow(0 0 0.5px rgb(147 200 238 / 0.35))
        drop-shadow(0 4px 8px rgb(0 0 0 / 0.5))
        drop-shadow(0 20px 32px rgb(0 0 0 / 0.55));
}

.dark .lift-sm,
[data-theme='dark'] .lift-sm {
    filter:
        drop-shadow(0 0 0.5px rgb(147 200 238 / 0.28))
        drop-shadow(0 2px 6px rgb(0 0 0 / 0.45));
}

.dark .lift-brand,
[data-theme='dark'] .lift-brand {
    filter:
        drop-shadow(0 0 0.5px rgb(147 200 238 / 0.45))
        drop-shadow(0 8px 14px rgb(48 135 206 / 0.28))
        drop-shadow(0 24px 36px rgb(0 0 0 / 0.5));
}

/* ───────── Dalgalanan mavi ışık ─────────
 * Öne çıkan bloklarda, ÖLÇÜLÜ: her kartta değil. Işık 11 saniyelik döngüde yön
 * ve yoğunluk değiştirir.
 * ⚠️ `box-shadow` değil `drop-shadow`: kutu gölgesi kırpma sınırında biter,
 *    ışığın kesik köşelerden taşması için filtre gerekir.
 */
@keyframes glow-drift {
    0%, 100% {
        filter:
            drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
            drop-shadow(0 6px 18px rgb(48 181 248 / 0.14))
            drop-shadow(0 18px 38px rgb(48 181 248 / 0.10));
    }
    33% {
        filter:
            drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
            drop-shadow(-8px 10px 24px rgb(48 181 248 / 0.20))
            drop-shadow(12px 24px 46px rgb(48 181 248 / 0.11));
    }
    66% {
        filter:
            drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
            drop-shadow(9px 7px 20px rgb(48 181 248 / 0.15))
            drop-shadow(-10px 22px 42px rgb(48 181 248 / 0.15));
    }
}

@keyframes glow-drift-dark {
    0%, 100% {
        filter:
            drop-shadow(0 0 0.5px rgb(147 200 238 / 0.30))
            drop-shadow(0 6px 18px rgb(48 181 248 / 0.18))
            drop-shadow(0 20px 40px rgb(0 0 0 / 0.45));
    }
    33% {
        filter:
            drop-shadow(0 0 0.5px rgb(147 200 238 / 0.30))
            drop-shadow(-9px 10px 26px rgb(48 181 248 / 0.26))
            drop-shadow(12px 24px 46px rgb(0 0 0 / 0.45));
    }
    66% {
        filter:
            drop-shadow(0 0 0.5px rgb(147 200 238 / 0.30))
            drop-shadow(10px 8px 22px rgb(48 181 248 / 0.20))
            drop-shadow(-10px 22px 44px rgb(0 0 0 / 0.5));
    }
}

.glow { animation: glow-drift 11s ease-in-out infinite; }

.dark .glow,
[data-theme='dark'] .glow { animation-name: glow-drift-dark; }

/* Yan yana duran kartlar aynı anda nefes almasın: aynı fazdaki üç kart
   "animasyon" değil "yanıp sönme" gibi okunuyor. */
.glow:nth-child(2) { animation-delay: -3.7s; }
.glow:nth-child(3) { animation-delay: -7.4s; }

/* Yazma alanına girildiğinde ışık hızlanır — kırpılan kutuda görünmeyen odak
   halkasının yerini tutar. */
.glow:focus-within { animation-duration: 4s; }

@media (prefers-reduced-motion: reduce) {
    .glow {
        animation: none;
        filter:
            drop-shadow(0 1px 1px rgb(15 23 42 / 0.05))
            drop-shadow(0 6px 18px rgb(48 181 248 / 0.14));
    }

    .dark .glow,
    [data-theme='dark'] .glow {
        filter:
            drop-shadow(0 0 0.5px rgb(147 200 238 / 0.30))
            drop-shadow(0 6px 18px rgb(48 181 248 / 0.18));
    }
}

/* ───────── Form alanı ─────────
 * Çerçevesiz: zeminden tonuyla ayrılır.
 * ⚠️ Tuzak 4: odak halkası DIŞA değil İÇE (`inset`) — dış halka kırpma
 *    sınırının dışında kalır ve hiç görünmez.
 */
.field {
    --cut: 8px;
    width: 100%;
    background-color: #f5f5f5;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: inherit;
    outline: none;
    border: 0;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );
}

.field::placeholder { color: #a3a3a3; }

.field:focus {
    box-shadow: inset 0 0 0 2px var(--talivio-blue);
}

.dark .field,
[data-theme='dark'] .field { background-color: rgb(255 255 255 / 0.05); }

.dark .field::placeholder,
[data-theme='dark'] .field::placeholder { color: #525252; }

/* ───────── Kırpılmış form alanları: çerçeve değil ton farkı ─────────
 * `.field` sınıfını tek tek her alana yazmak yerine, kırpılmış olan her giriş
 * alanı aynı kurala uyar. Sebebi görsel bir kusur: `border` dikdörtgen çizilip
 * kırpıldığı için kesik köşelerde ÇERÇEVE YARIDA KALIYOR — kutu kırıkmış gibi
 * duruyor. Sözleşme §1 kural 2 zaten "çerçeve değil ton farkı" diyor.
 *
 * Yarı saydam katman bilinçli: alan hangi zeminin üstünde olursa olsun
 * (beyaz kart, koyu kart, renkli şerit) ondan bir tık ayrışır.
 */
input.cut, input.cut-sm, input.cut-lg,
select.cut, select.cut-sm, select.cut-lg,
textarea.cut, textarea.cut-sm, textarea.cut-lg {
    border-color: transparent;
    background-color: rgb(15 23 42 / 0.05);
}

.dark input.cut, .dark input.cut-sm, .dark input.cut-lg,
.dark select.cut, .dark select.cut-sm, .dark select.cut-lg,
.dark textarea.cut, .dark textarea.cut-sm, .dark textarea.cut-lg,
[data-theme='dark'] input.cut, [data-theme='dark'] input.cut-sm,
[data-theme='dark'] input.cut-lg, [data-theme='dark'] select.cut,
[data-theme='dark'] select.cut-sm, [data-theme='dark'] select.cut-lg,
[data-theme='dark'] textarea.cut, [data-theme='dark'] textarea.cut-sm,
[data-theme='dark'] textarea.cut-lg {
    background-color: rgb(255 255 255 / 0.06);
}

/* ───────── Kırpılmış her odaklanabilir eleman için odak halkası ─────────
 * ⚠️ Tuzak 4: `focus:ring-*` bir `box-shadow`'dur ve kırpma sınırının DIŞINDA
 * kalır — kırpılan bir alanda odak halkası hiç görünmez, klavye kullanıcısı
 * nerede olduğunu göremez. Halkayı içe alıyoruz.
 *
 * `!important` bilinçli: Tailwind'i CDN'den alan sayfalarda üretilen stil
 * etiketi bu dosyadan SONRA da eklenebiliyor; aynı ağırlıktaki `focus:ring-2`
 * o durumda kazanır ve halka yine kaybolurdu.
 */
.cut:focus, .cut-sm:focus, .cut-lg:focus,
.cut:focus-visible, .cut-sm:focus-visible, .cut-lg:focus-visible {
    box-shadow: inset 0 0 0 2px var(--talivio-blue) !important;
    outline: none;
}

/* ───────── Birincil buton ───────── */
.btn-primary {
    --cut: 8px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #171717;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #fff;
    transition: background-color 150ms ease;
    clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );
}

.btn-primary:hover { background-color: #404040; }

.dark .btn-primary,
[data-theme='dark'] .btn-primary { background-color: #fff; color: #171717; }

.dark .btn-primary:hover,
[data-theme='dark'] .btn-primary:hover { background-color: #e5e5e5; }