/* Pusula tasarım dili: ortak süs sınıfları (susleme.js bunları kurar, bütün
   ekranlar kullanır). Belirteçler ve yazı tipleri stil.css'te: --serif, --mono,
   --altin-isik, --altin-cizgi, --altin-cizgi-soluk, --nokta-doku, --zemin-derin.
   Her sınıf iki temada ve iki yönde (Dari RTL) çalışır. Sonsuz animasyonlar
   yalnız transform/opacity; «hareketi azalt»ta dururlar. */

/* --- derece etiketi: «045° · Ağ» ----------------------------------------- */
.derece { display: inline-flex; align-items: center; gap: .55em; color: var(--altin-metin); font-size: .7rem; line-height: 1.4; white-space: nowrap; max-inline-size: 100%; }
/* Başta kısa bir çizgi (cetvelden kopmuş tick); simge varsa onun yerine halka. */
.derece::before { content: ""; flex: none; inline-size: 14px; block-size: 1px; background: linear-gradient(to right, var(--altin-2), transparent); }
[dir="rtl"] .derece::before { background: linear-gradient(to left, var(--altin-2), transparent); }
.derece:has(.derece-simge)::before { display: none; }
.derece-no { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; color: var(--altin-1); }
.derece-ayrac { color: var(--cok-soluk); }
.derece > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.derece-simge { display: inline-grid; place-items: center; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1px solid var(--altin-cizgi); color: var(--altin-metin); }
:root[data-tema="gunduz"] .derece-no { color: var(--altin-5); }

/* --- köşe işaretleri: ✦ baş köşe, ✕ son köşe (ebeveyn .koseli) ------------- */
.koseli { position: relative; }
.kart.koseli { padding-block-start: 26px; }   /* köşe işaretlerine yer */
.kose { position: absolute; inset-block-start: 10px; inline-size: 10px; block-size: 10px; line-height: 0; color: var(--altin-3); opacity: .85; pointer-events: none; }
.kose svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.kose-bas { inset-inline-start: 12px; animation: kose-parilti 5.5s ease-in-out infinite; }
.kose-son { inset-inline-end: 12px; color: var(--altin-4); }
:root[data-tema="gunduz"] .kose { color: var(--altin-5); }
:root[data-tema="gunduz"] .kose-son { color: var(--altin-4); }

/* --- cetvel: tick'li şerit, altında bölüm adları ve dereceleri ------------- */
.cetvel { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.cetvel-serit {
  block-size: 12px; border-block-start: 1px solid var(--altin-cizgi-soluk);
  background:
    repeating-linear-gradient(to right, var(--altin-cizgi) 0 1px, transparent 1px 40px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(to right, var(--altin-cizgi-soluk) 0 1px, transparent 1px 8px) 0 0 / 100% 6px no-repeat;
}
[dir="rtl"] .cetvel-serit { transform: scaleX(-1); }   /* uzun tick'ler sağdan başlasın */
.cetvel-liste { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 2px; }
.cetvel-liste > li { min-inline-size: 0; display: flex; }
.cetvel-oge { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 6px; min-block-size: 44px; text-decoration: none; color: var(--soluk); transition: color var(--sure-hizli); min-inline-size: 0; }
.cetvel-ad { font-size: .74rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.cetvel-derece { font-size: .6rem; color: var(--cok-soluk); unicode-bidi: isolate; direction: ltr; }
.cetvel-oge:hover { color: var(--metin); }
.cetvel-oge.secili { color: var(--altin-metin); }
.cetvel-oge.secili .cetvel-derece { color: var(--altin-3); }
/* Seçili bölümün iğnesi: şeritten aşağı inen, usulca parlayan tick. */
.cetvel-oge::before { content: ""; position: absolute; inset-block-start: -18px; inset-inline: 0; margin-inline: auto; inline-size: 2px; block-size: 18px; border-radius: 1px; background: var(--altin-isik); box-shadow: 0 0 8px var(--altin-2); opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity var(--sure-hizli), transform var(--sure) var(--egri); }
.cetvel-oge.secili::before { opacity: 1; transform: none; animation: cetvel-parilti 2.8s ease-in-out infinite; }
:root[lang="fa-AF"] .cetvel-ad { font-size: .8rem; }

/* --- canlı çip: «● Canlı · Kabil 14:32» ------------------------------------ */
.canli-cip {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 26px; padding-block: 3px; padding-inline: 9px 11px;
  border-radius: 999px; border: 1px solid var(--altin-cizgi); background: rgb(236 208 120 / 0.06); color: var(--altin-metin);
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
:root[lang="fa-AF"] .canli-cip { font-size: .74rem; letter-spacing: 0; text-transform: none; }
:root[data-tema="gunduz"] .canli-cip { background: rgb(122 92 15 / 0.07); }
.canli-nokta { position: relative; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--altin-isik); box-shadow: 0 0 6px var(--altin-2); }
.canli-nokta::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--altin-isik); animation: canli-halka 2.2s ease-out infinite; }
.canli-cip.bekliyor { color: var(--turuncu); border-color: color-mix(in srgb, var(--turuncu) 40%, transparent); background: color-mix(in srgb, var(--turuncu) 8%, transparent); }
.canli-cip.bekliyor .canli-nokta { background: var(--turuncu); box-shadow: none; animation: canli-yanip 1.4s ease-in-out infinite; }
.canli-cip.bekliyor .canli-nokta::after { display: none; }
.canli-cip.kopuk { color: var(--soluk); border-color: var(--cizgi-guclu); background: transparent; }
.canli-cip.kopuk .canli-nokta { background: var(--kirmizi); box-shadow: none; }
.canli-cip.kopuk .canli-nokta::after, .canli-cip.durgun .canli-nokta::after { display: none; }
.canli-cip.durgun .canli-nokta { animation: none; }

/* --- pusula başlığı: derece + serif başlık + alt satır (+ sağda bir şey) ---- */
.pusula-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-inline-size: 0; }
.pusula-baslik.koseli { padding-block-start: 24px; }
.pusula-baslik-metin { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 6px; }
.pusula-baslik .serif-baslik { margin-block-start: 2px; overflow-wrap: anywhere; }
.pusula-alt { color: var(--soluk); font-size: .92rem; max-inline-size: 52ch; }
.pusula-sag { flex: none; display: flex; align-items: center; gap: 8px; padding-block-end: 2px; }

/* --- büyük sayı: mono, aralıklı, sayarak gelir; şeritte ince dikey ayraçlar - */
.buyuk-sayi { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.buyuk-sayi > b { display: flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 500; font-size: clamp(1.25rem, 5.2vw, 2rem); letter-spacing: .06em; line-height: 1; color: var(--metin); text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buyuk-sayi-birim { font-size: .6rem; letter-spacing: .08em; color: var(--altin-metin); }
/* Etiket sütun genişliğine katılmaz (inline-size 0 + min 100%): sütunu rakam belirler, etiket sığmazsa kısalır. */
.buyuk-sayi > span { inline-size: 0; min-inline-size: 100%; font-size: .72rem; font-weight: 650; line-height: 1.3; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[lang="fa-AF"] .buyuk-sayi > b { font-size: clamp(1.25rem, 5.2vw, 2rem); letter-spacing: .03em; }
:root[lang="fa-AF"] .buyuk-sayi-birim { letter-spacing: 0; }
/* Şerit: sütunlar en az içerikleri kadar; sığmazsa çubuksuz yana kayar, rakam kırpılmaz. */
.buyuk-sayilar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); padding-block: 4px; overflow-x: auto; scrollbar-width: none; }
.buyuk-sayilar::-webkit-scrollbar { display: none; }
.buyuk-sayilar > .buyuk-sayi { padding-inline: 12px; }
.buyuk-sayilar > .buyuk-sayi:first-child { padding-inline-start: 0; }
.buyuk-sayilar > .buyuk-sayi + .buyuk-sayi { border-inline-start: 1px solid var(--altin-cizgi-soluk); }

/* --- noktalı ızgara zemini (yardımcı) -------------------------------------- */
.izgara-zemin { background-image: radial-gradient(var(--nokta-doku) 1px, transparent 1.2px); background-size: 18px 18px; }

/* --- noktalı yazı: dev konturlu kelime (SVG text + nokta deseni) ----------- */
.noktali-yazi { display: block; max-inline-size: 100%; block-size: auto; margin-inline: auto; overflow: visible; color: var(--altin-3); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
.noktali-yazi text { font-family: var(--yazi); font-weight: 800; letter-spacing: .04em; stroke: var(--altin-cizgi); stroke-width: 1; vector-effect: non-scaling-stroke; paint-order: stroke fill; }
.noktali-nokta { fill: var(--altin-3); }
:root[data-tema="gunduz"] .noktali-yazi { color: var(--altin-5); }
:root[data-tema="gunduz"] .noktali-nokta { fill: var(--altin-5); }

/* --- ince çizgi: altın hairline ayraç, ortası parlak ----------------------- */
.ince-cizgi { border: 0; margin: 0; inline-size: 100%; block-size: 1px; background: linear-gradient(to right, transparent, var(--altin-cizgi) 30%, var(--altin-isik) 50%, var(--altin-cizgi) 70%, transparent); opacity: .85; }

/* --- yıldız tozu (ebeveyn: position relative + overflow hidden) ------------ */
.yildiz { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: var(--b, 2px); block-size: var(--b, 2px); border-radius: 50%; background: var(--altin-isik); box-shadow: 0 0 calc(var(--b, 2px) * 2) var(--altin-2); opacity: .4; pointer-events: none; animation: yildiz-yan var(--s, 4s) ease-in-out var(--g, 0s) infinite alternate; }
.yildiz.durgun { animation: none; opacity: .6; }

/* --- animasyonlar (yalnız opacity/transform) ------------------------------- */
@keyframes kose-parilti { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes cetvel-parilti { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes canli-halka { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes canli-yanip { 50% { opacity: .3; } }
@keyframes yildiz-yan { from { opacity: .12; transform: scale(.8); } to { opacity: .95; transform: scale(1.15); } }

@media (min-width: 680px) {
  .pusula-baslik-metin { gap: 8px; }
  .buyuk-sayilar > .buyuk-sayi { padding-inline: 22px; }
  .cetvel-ad { font-size: .8rem; }
  .cetvel-oge { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kose-bas, .cetvel-oge.secili::before, .canli-nokta, .yildiz { animation: none; }
  .canli-nokta::after { display: none; }
  .yildiz { opacity: .6; transform: none; }
}

/* Yönetici avatarı: adres özetinden gelen rastgele ton yerine altın (tek vurgu rengi). */
.karsilama-avatar .avatar, .kullanici-kart .avatar { --ton: 44; }