/* ═══════════════════════════════════════════════════════════
   TERAN ILDIZ — css/portal.css
   "Gazeta" (editorial portal) ko'rinishi — alraiah.net uslubida,
   lekin Teran Ildiz qora-oltin kimligini saqlab.
   Barcha ranglar var() orqali → 3 mavzuda ham ishlaydi.
   ═══════════════════════════════════════════════════════════ */

/* ── Sana chizig'i (masthead date rule) ── */
.ti-dateline{
  display:flex; align-items:center; gap:14px;
  margin:2px 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--bdr);
  font-family:var(--ff-brand,serif);
  letter-spacing:.14em; text-transform:uppercase;
  font-size:.7rem; color:var(--muted);
}
.ti-dateline .tdl-hijri{ color:var(--gold); }
.ti-dateline .tdl-sep{ flex:1; height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent); }
.ti-dateline .tdl-brand{ color:var(--ink); opacity:.7; }
@media(max-width:640px){ .ti-dateline{ font-size:.62rem; gap:10px; } .ti-dateline .tdl-brand{ display:none; } }

/* ── Front-page hero ── */
.ti-hero{ margin:0 0 30px; }
.ti-hero[hidden]{ display:none; }
.ti-hero-eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  font-family:var(--ff-brand,serif); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.ti-hero-eyebrow::after{ content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent); }

.ti-hero-grid{ display:flex; flex-direction:column; gap:14px; }

/* Lead (asosiy) maqola */
.ti-lead{
  position:relative; display:flex; flex-direction:column;
  min-height:300px; padding:26px; cursor:pointer; overflow:hidden;
  border:1px solid var(--bdr-1); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--gold-dim), transparent 60%),
    linear-gradient(155deg,var(--surf-1),var(--surf));
  box-shadow:var(--sh-md);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ti-lead:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--bdr-2); }
.ti-lead-ic{
  width:62px; height:62px; border-radius:18px; display:grid; place-items:center;
  font-size:26px; color:var(--gold); margin-bottom:auto;
  background:var(--gold-dim); border:1px solid var(--bdr-1);
}
.ti-lead-eye{
  margin-top:20px; font-family:var(--ff-brand,serif); font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.ti-lead-ttl{
  font-family:var(--ff-display,serif); font-weight:600; line-height:1.12;
  font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--ink); margin:8px 0 10px;
}
.ti-lead-dsc{ color:var(--muted); font-size:.95rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ti-lead-go{
  margin-top:18px; display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  padding:10px 18px; border-radius:var(--r-pill); font-weight:600; font-size:.86rem;
  background:var(--gold); color:#1a1206;
}

/* Secondary (ikkilamchi) ranked headlines */
.ti-sec{ display:flex; flex-direction:column; }
.ti-sec-item{
  display:flex; gap:14px; align-items:flex-start; padding:14px 6px; cursor:pointer;
  border-bottom:1px solid var(--bdr); transition:padding-left var(--dur) var(--ease);
}
.ti-sec-item:first-child{ padding-top:0; }
.ti-sec-item:last-child{ border-bottom:0; }
.ti-sec-item:hover{ padding-left:8px; }
.ti-sec-no{
  font-family:var(--ff-display,serif); font-size:1.5rem; line-height:1;
  color:var(--gold); opacity:.5; min-width:30px; font-variant-numeric:tabular-nums;
}
.ti-sec-tx{ min-width:0; }
.ti-sec-eye{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-family:var(--ff-brand,serif); }
.ti-sec-ttl{ font-family:var(--ff-display,serif); font-weight:600; font-size:1.02rem;
  line-height:1.25; color:var(--ink); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Yon panel (rail) — OLIB TASHLANDI: grid endi to'liq kenglikda ── */
.ti-rail, #rail{ display:none !important; }
@media(min-width:1100px){
  .ti-portal{
    display:block;
  }
  #grid{ width:100%; }
}

/* ── Yon panel (rail) widget'lari ── */
.ti-rail{ display:flex; flex-direction:column; gap:22px; }
.ti-rail[hidden]{ display:none; }
.rw{
  border:1px solid var(--bdr-1); border-radius:var(--r);
  background:var(--surf); box-shadow:var(--sh-sm); overflow:hidden;
}
.rw-h{
  display:flex; align-items:center; gap:9px; padding:13px 16px;
  border-bottom:1px solid var(--bdr);
  font-family:var(--ff-brand,serif); letter-spacing:.12em; text-transform:uppercase;
  font-size:.72rem; color:var(--ink);
}
.rw-h i{ color:var(--gold); font-size:.86rem; }
.rw-b{ padding:6px 0; }

/* Ranked list (most-read) — imzo element: katta serif raqamlar */
.rw-rank{ display:flex; gap:13px; align-items:center; padding:11px 16px; cursor:pointer;
  transition:background var(--dur) var(--ease); }
.rw-rank:hover{ background:var(--surf-1); }
.rw-rank-no{ font-family:var(--ff-display,serif); font-size:1.45rem; line-height:1;
  color:var(--gold); min-width:26px; text-align:center; font-variant-numeric:tabular-nums; }
.rw-rank.top .rw-rank-no{ color:var(--gold-hi); }
.rw-rank-tx{ min-width:0; }
.rw-rank-ttl{ font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rw-rank-meta{ font-size:.7rem; color:var(--muted); margin-top:3px; }

/* Sections list */
.rw-sec{ display:flex; align-items:center; gap:11px; padding:10px 16px; cursor:pointer;
  color:var(--txt,var(--ink)); transition:background var(--dur) var(--ease); }
.rw-sec:hover{ background:var(--surf-1); }
.rw-sec.on{ background:var(--gold-dim); }
.rw-sec.on .rw-sec-nm{ color:var(--gold-hi); }
.rw-sec i{ width:20px; text-align:center; color:var(--gold); font-size:.86rem; flex:0 0 auto; }
.rw-sec-nm{ flex:1; font-size:.88rem; font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rw-sec-ct{ font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.rw-sec-div{ height:1px; margin:6px 16px; background:var(--bdr); }

/* Archive list */
.rw-arc{ display:flex; gap:12px; align-items:center; padding:11px 16px; cursor:pointer;
  transition:background var(--dur) var(--ease); }
.rw-arc:hover{ background:var(--surf-1); }
.rw-arc-ic{ width:36px; height:46px; border-radius:6px; display:grid; place-items:center;
  background:var(--gold-dim); color:var(--gold); flex:0 0 auto; border:1px solid var(--bdr); }
.rw-arc-tx{ min-width:0; }
.rw-arc-ttl{ font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rw-arc-sub{ font-size:.7rem; color:var(--muted); margin-top:2px; }

/* Random button */
.rw-rand{ display:flex; width:calc(100% - 28px); margin:8px 14px 12px; align-items:center;
  justify-content:center; gap:9px; padding:12px; cursor:pointer;
  border:1px dashed var(--bdr-2); border-radius:var(--r-sm); background:transparent;
  color:var(--ink); font:inherit; font-size:.86rem; font-weight:600;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.rw-rand:hover{ background:var(--gold-dim); border-color:var(--gold); }
.rw-rand i{ color:var(--gold); }

/* Colophon (stats) */
.rw-colo{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:4px; }
.rw-colo div{ text-align:center; padding:12px 4px; }
.rw-colo b{ display:block; font-family:var(--ff-display,serif); font-size:1.4rem; color:var(--gold-hi); }
.rw-colo span{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ── Footer (colophon) ── */
.ti-foot{ margin-top:46px; padding-top:28px; border-top:1px solid var(--bdr-1);
  display:grid; gap:26px; grid-template-columns:1fr; }
@media(min-width:720px){ .ti-foot{ grid-template-columns:1.6fr 1fr 1fr; gap:34px; } }
.ti-foot[hidden]{ display:none; }
.tf-brand .tf-nm{ font-family:var(--ff-brand,serif); letter-spacing:.16em;
  font-size:1.02rem; color:var(--ink); }
.tf-brand p{ margin-top:10px; color:var(--muted); font-size:.84rem; line-height:1.6; max-width:42ch; }
.tf-brand .tf-tag{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  padding:6px 12px; border-radius:var(--r-pill); background:var(--gold-dim);
  color:var(--gold); font-size:.72rem; font-weight:600; }
.tf-col h5{ font-family:var(--ff-brand,serif); letter-spacing:.12em; text-transform:uppercase;
  font-size:.7rem; color:var(--gold); margin:0 0 12px; }
.tf-col a{ display:block; padding:5px 0; color:var(--ink); opacity:.8; cursor:pointer;
  font-size:.86rem; text-decoration:none; transition:opacity var(--dur),color var(--dur); }
.tf-col a:hover{ opacity:1; color:var(--gold-hi); }
.ti-foot-base{ grid-column:1/-1; margin-top:8px; padding-top:18px; border-top:1px solid var(--bdr);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:.74rem; color:var(--muted); }

/* Mobil: rail tagga tushganda biroz nafas */
@media(max-width:1099px){
  .ti-rail{ margin-top:30px; }
  .ti-rail .rw{ max-width:560px; }
}

/* ═══ TI-LIVE PANEL (jonli animatsiya + tashqi havolalar) ═══ */
.ti-live-panel{
  display:flex; flex-direction:column; gap:20px;
  background:var(--card); border:1px solid var(--bdr);
  border-radius:var(--r-card,16px); padding:28px 24px;
  position:relative; overflow:hidden; cursor:default;
}
.ti-live-panel::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(180,140,60,.08) 0%, transparent 70%);
  pointer-events:none;
}

/* Animatsiya qismi */
.ti-live-anim{
  position:relative; width:80px; height:80px; flex-shrink:0;
}
.ti-live-orb{
  position:absolute; inset:20px;
  border-radius:50%; background:var(--gold,#c9a84c);
  box-shadow:0 0 18px rgba(201,168,76,.6);
  animation:orbPulse 2s ease-in-out infinite;
}
.ti-live-ring{
  position:absolute; border-radius:50%;
  border:1.5px solid var(--gold,#c9a84c);
  animation:ringExpand 2.4s ease-out infinite;
  opacity:0;
}
.ti-live-ring-1{ inset:14px; animation-delay:0s; }
.ti-live-ring-2{ inset:6px;  animation-delay:.6s; }
.ti-live-ring-3{ inset:0px;  animation-delay:1.2s; }

.ti-live-waves{
  position:absolute; bottom:-4px; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:3px;
}
.ti-live-waves span{
  display:block; width:4px; border-radius:2px;
  background:var(--gold,#c9a84c); opacity:.7;
  animation:waveBar 1.2s ease-in-out infinite;
}
.ti-live-waves span:nth-child(1){ height:8px;  animation-delay:0s; }
.ti-live-waves span:nth-child(2){ height:16px; animation-delay:.15s; }
.ti-live-waves span:nth-child(3){ height:24px; animation-delay:.3s; }
.ti-live-waves span:nth-child(4){ height:16px; animation-delay:.45s; }
.ti-live-waves span:nth-child(5){ height:8px;  animation-delay:.6s; }

@keyframes orbPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 18px rgba(201,168,76,.6); }
  50%{ transform:scale(1.12); box-shadow:0 0 32px rgba(201,168,76,.9); }
}
@keyframes ringExpand{
  0%{ transform:scale(.4); opacity:.7; }
  100%{ transform:scale(1); opacity:0; }
}
@keyframes waveBar{
  0%,100%{ transform:scaleY(1); opacity:.7; }
  50%{ transform:scaleY(1.6); opacity:1; }
}

/* Content qismi */
.ti-live-content{ display:flex; flex-direction:column; gap:10px; }
.ti-live-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold,#c9a84c);
}
.ti-live-badge .fa-circle{
  font-size:.45rem;
  animation:liveDot 1.4s ease-in-out infinite;
}
@keyframes liveDot{
  0%,100%{ opacity:1; } 50%{ opacity:.2; }
}
.ti-live-title{
  font-family:var(--ff-brand,serif); font-size:1.5rem;
  font-weight:700; color:var(--ink); margin:0;
}
.ti-live-desc{
  color:var(--muted); font-size:.88rem; line-height:1.5; margin:0;
}

/* Tashqi havolalar */
.ti-ext-links{
  display:grid; grid-template-columns:1fr; gap:6px; margin-top:8px;
}
.ti-ext-link{
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:11px;
  border:1px solid color-mix(in srgb, var(--lk-color) 38%, var(--bdr-1));
  background:linear-gradient(135deg, color-mix(in srgb, var(--lk-color) 14%, transparent), color-mix(in srgb, var(--lk-color) 4%, transparent));
  color:var(--ink); text-decoration:none;
  font-size:.82rem; font-weight:600; line-height:1.2;
  transition:transform .18s var(--ease,ease), background .18s, border-color .18s, box-shadow .18s;
}
.ti-ext-link i:first-child{
  flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  color:var(--lk-color); font-size:.88rem;
  background:color-mix(in srgb, var(--lk-color) 16%, transparent);
}
.ti-ext-link span{ flex:1; min-width:0; }
.ti-ext-go{ flex:none; font-size:.64rem; color:var(--muted); transition:transform .2s,color .2s; }
.ti-ext-link:hover{
  transform:translateX(2px);
  border-color:color-mix(in srgb, var(--lk-color) 75%, transparent);
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--lk-color) 55%, transparent);
}
.ti-ext-link:hover .ti-ext-go{ transform:translateX(2px); color:var(--lk-color); }
.ti-ext-link:active{ transform:scale(.98); }

/* ═══ TI MANBA ACCORDION (Foydalanilgan manbalar) ═══ */
.ti-manba-panel{ padding:0; overflow:hidden; display:block; gap:0; }
.ti-manba-panel::before{ display:none; }
.ti-manba-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--ff-brand,serif); font-size:.8rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink); text-align:left;
}
.ti-manba-toggle-l{ display:flex; align-items:center; gap:9px; }
.ti-manba-toggle-l i{ color:var(--gold); }
.ti-manba-chev{ color:var(--muted); font-size:.78rem; transition:transform .25s var(--ease-out,ease); }
.ti-manba-toggle[aria-expanded="true"] .ti-manba-chev{ transform:rotate(180deg); }
.ti-manba-toggle:hover{ color:var(--gold-hi); }
.ti-manba-body{
  max-height:0; overflow:hidden; opacity:0; padding:0 16px;
  transition:max-height .32s var(--ease-out,ease), opacity .25s ease, padding .32s ease;
}
.ti-manba-body.open{ max-height:600px; opacity:1; padding:0 16px 16px; }
.ti-manba-body .ti-live-desc{ margin:0 0 10px; }

@media(max-width:560px){
  .ti-manba-toggle{ padding:11px 14px; font-size:.76rem; }
  .ti-manba-body.open{ padding:0 14px 14px; }
  .ti-ext-link{ font-size:.78rem; padding:7px 10px; }
  .ti-ext-link i:first-child{ width:24px; height:24px; font-size:.78rem; }
}

/* ═══ TI NEWS FEED — bosh sahifa o'ng panel yangiliklar ═══ */
.ti-sec-hdr {
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold,#c9a84c); display:flex; align-items:center; gap:6px;
  padding-bottom:10px; border-bottom:1px solid var(--bdr);
  margin-bottom:4px;
}
.ti-news-feed-list { display:flex; flex-direction:column; }

/* Loading dots */
.ti-feed-loading {
  display:flex; align-items:center; gap:6px;
  padding:18px 0; justify-content:center;
}
.ti-feed-loading span {
  width:7px; height:7px; border-radius:50%;
  background:var(--gold,#c9a84c); opacity:.4;
  animation:feedDot 1.2s ease-in-out infinite;
}
.ti-feed-loading span:nth-child(2){ animation-delay:.2s; }
.ti-feed-loading span:nth-child(3){ animation-delay:.4s; }
@keyframes feedDot {
  0%,100%{ transform:scale(1); opacity:.3; }
  50%{ transform:scale(1.5); opacity:1; }
}

/* Feed items */
.ti-feed-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 6px 8px 0;
  border-bottom:1px solid var(--bdr);
  cursor:pointer; transition:padding-left .18s, background .18s;
  opacity:0; animation:feedIn .35s ease forwards;
  border-radius:6px;
}
.ti-news-feed-list.loaded .ti-feed-item { opacity:1; }
@keyframes feedIn {
  from{ opacity:0; transform:translateX(12px); }
  to  { opacity:1; transform:translateX(0); }
}
.ti-feed-item:last-child { border-bottom:0; }
.ti-feed-item:hover { padding-left:6px; background:var(--hover,rgba(255,255,255,.03)); border-radius:6px; }
.ti-feed-no {
  font-size:.78rem; font-weight:700; color:var(--muted);
  min-width:22px; text-align:right; flex-shrink:0;
}
.ti-feed-body { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.ti-feed-source {
  font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:4px;
}
.ti-feed-ttl {
  font-size:.82rem; font-weight:600; color:var(--ink);
  line-height:1.32; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.ti-feed-date { font-size:.7rem; color:var(--muted); }
.ti-feed-arr {
  font-size:.65rem; color:var(--muted); flex-shrink:0;
  transition:color .18s, transform .18s;
}
.ti-feed-item:hover .ti-feed-arr { color:var(--gold,#c9a84c); transform:translate(2px,-2px); }
.ti-feed-err { color:var(--muted); font-size:.85rem; padding:16px 0; text-align:center; }