/* Yuog Atlas — Yuog Root tasarim sisteminin ek parcalari.
   Renk/tipografi Tailwind'den gelir; burada yalnizca utility ile
   ifade edilemeyen parcalar var. */

body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

/* Sol menu: varsayilan dar, [data-nav="mini"] ile sadece ikon moduna duser. */
.nav-sidebar { width: 13.5rem; transition: width .18s ease; }
html[data-nav="mini"] .nav-sidebar { width: 4.25rem; }
html[data-nav="mini"] .nav-sidebar .nav-wide { display: none !important; }
html[data-nav="mini"] .nav-sidebar .nav-head { flex-direction: column; gap: .5rem; }
html[data-nav="mini"] .nav-sidebar .nav-head > span:first-child { flex: none; padding: 0; }
html[data-nav="mini"] .nav-sidebar .nav-item { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
html[data-nav="mini"] .nav-sidebar .nav-badge {
    position: absolute; top: .15rem; right: .3rem; margin-left: 0;
}
html[data-nav="mini"] .nav-sidebar .nav-section {
    height: 1px; margin: .6rem .55rem; padding: 0;
    overflow: hidden; text-indent: -9999px;
    background: rgba(113, 113, 122, .3);
}
html[data-nav="mini"] .nav-sidebar .nav-wide-mt { margin-top: 0; }
html[data-nav="mini"] .nav-sidebar .nav-foot { padding: .4rem; }
html[data-nav="mini"] .nav-sidebar .nav-foot-btn { padding-left: 0; padding-right: 0; }
html[data-nav="mini"] .nav-toggle-icon { transform: rotate(180deg); }

.code-grid {
    background-image:
        linear-gradient(to right, rgba(113, 113, 122, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(113, 113, 122, .10) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Sohbet balonlari — pre-wrap oldugu icin kaynaktaki girinti ekrana yansimaz
   diye metin tek satirda uretilir (bkz. index.php). */
.balon { white-space: pre-wrap; word-break: break-word; }

/* Basit cizgi grafik */
.grafik svg { width: 100%; height: auto; display: block; }

/* --- yukleme durumu ------------------------------------------------------
   Sunucu taramasi saniyeler surer (her sunucuya ayri TCP/SSH/SQL turu).
   O sure boyunca ekran bos kalmasin diye kutularin sekli en bastan durur ve
   parildar; veri gelince yerine oturur. Renk yok, yalnizca gri: iskelet bir
   olcum degildir, yanlislikla "deger" gibi okunmamali. */

@keyframes atlas-parilti {
    0%   { background-position: -160% 0; }
    100% { background-position:  160% 0; }
}

.iskelet {
    display: inline-block;
    border-radius: 9999px;
    background-color: rgba(113, 113, 122, .16);
    background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
    background-size: 160% 100%;
    background-repeat: no-repeat;
    animation: atlas-parilti 1.5s ease-in-out infinite;
}

html.dark .iskelet {
    background-color: rgba(255, 255, 255, .07);
    background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .13) 50%, transparent 100%);
}

/* Belirsiz ilerleme cizgisi: "ne kadar kaldi" bilinmiyor, bilinen tek sey
   isin surdugu — o yuzden yuzde degil, gidip gelen bir isik. */
.tarama-cizgi { position: relative; overflow: hidden; }
.tarama-cizgi::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 35%;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, #10b981, transparent);
    animation: atlas-tarama 1.3s ease-in-out infinite;
}
@keyframes atlas-tarama {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* "Yükleniyor…" — uc nokta metnin parcasi gibi tek tek belirir. */
.nokta-akisi::after {
    content: '…';
    animation: atlas-nokta 1.4s steps(4, end) infinite;
    clip-path: inset(0 100% 0 0);
    display: inline-block;
}
@keyframes atlas-nokta {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* --- yuk devri semasi ----------------------------------------------------
   Uc kutu arasindaki hatlar. Iki katman ustuste durur: solgun bir ray (yol
   her zaman vardir) ve uzerinde akan kesik cizgi (trafik su anda buradan
   geciyor). Yedegin hatti ray olarak gorunur ama akmaz — "bagli ama bos"
   demenin en kisa yolu. */

.lb-ray {
    fill: none;
    stroke: rgba(113, 113, 122, .28);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.lb-akis {
    fill: none;
    stroke: #10b981;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 3 10;
    vector-effect: non-scaling-stroke;
    animation: atlas-akis 1.1s linear infinite;
}

@keyframes atlas-akis {
    to { stroke-dashoffset: -13; }
}

/* Bos hat: kirmizi degil gri. Yedegin bos olmasi ariza degildir. */
.lb-akis.lb-bos { stroke: transparent; animation: none; }

/* Akan ama olu hat: trafik gidiyor, karsi taraf cevap vermiyor. */
.lb-akis.lb-kotu { stroke: #f43f5e; }

@media (prefers-reduced-motion: reduce) {
    .lb-akis { animation: none; stroke-dasharray: none; opacity: .85; }
}

/* Devir penceresi: aniden belirmek yerine kisa bir yukselisle gelir.
   Suresi kasten kisa (.18s) — bu pencere bir gosteri degil, siteyi baska
   makineye tasiyan bir karar ekrani; beklemeye deger bir animasyon olmamali. */
.lb-pencere {
    animation: atlas-pencere .18s cubic-bezier(.16, 1, .3, 1);
}

@keyframes atlas-pencere {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lb-pencere { animation: none; }
}

/* CANLI isareti — trafigi su an karsilayan makinenin yanindaki nabiz.
   Halka disari dogru buyuyup soner; altindaki sabit nokta hep durur, yani
   hareket kapatildiginda bile isaret gorunur kalir. */
.lb-nabiz {
    animation: atlas-nabiz 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes atlas-nabiz {
    0%   { transform: scale(1);   opacity: .75; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lb-nabiz { animation: none; opacity: .35; }
}

/* Hareket hassasiyeti olan kullanicida her sey durur ama iskelet yine
   gorunur kalir — bilgi kaybi olmaz, yalnizca kimildamaz. */
@media (prefers-reduced-motion: reduce) {
    .iskelet,
    .tarama-cizgi::after,
    .nokta-akisi::after { animation: none; }
    .nokta-akisi::after { clip-path: none; }
}