/* Kitabizi — işıqlı, rəngli, müasir */

:root {
  color-scheme: light;

  --fon:        #ffffff;
  --fon-2:      #f6f7f9;
  --seth:       #ffffff;
  --hasiye:     #e6e8ec;
  --hasiye-2:   #d6dae1;

  --metn:       #15181d;
  --metn-2:     #5a6472;
  --metn-3:     #8b95a4;

  --esas:       #0d9488;   /* firuzəyi-yaşıl */
  --esas-tund:  #0b7c72;
  --esas-acig:  #e6f5f3;

  --pulsuz:     #e8590c;
  --pulsuz-fon: #fff2e8;

  --yeni:  #16a34a;
  --ela:   #16a34a;
  --yaxsi: #ca8a04;
  --orta:  #ea580c;
  --zedeli:#dc2626;

  --k: 14px;      /* künc */
  --k-ki: 10px;
  --en: 62rem;

  --kolge:    0 1px 2px rgba(18,22,30,.05), 0 1px 3px rgba(18,22,30,.04);
  --kolge-2:  0 4px 16px rgba(18,22,30,.08), 0 2px 4px rgba(18,22,30,.04);

  --bl0:#f97316; --bl1:#0d9488; --bl2:#6366f1; --bl3:#ec4899;
  --bl4:#22c55e; --bl5:#06b6d4; --bl6:#eab308; --bl7:#8b5cf6;
  --bl8:#3b82f6; --bl9:#ef4444; --bl10:#14b8a6; --bl11:#f43f5e;

  --yazi: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Standart tema həmişə ağdır. Qaranlıq yalnız açıq istəklə:
   <html data-tema="qaranliq"> və ya ?tema=qaranliq */
:root[data-tema="qaranliq"] {
    color-scheme: dark;

    --fon:      #0f1318;
    --fon-2:    #161b22;
    --seth:     #181d25;
    --hasiye:   #262d38;
    --hasiye-2: #333c4a;

    --metn:     #eef1f5;
    --metn-2:   #a3aebe;
    --metn-3:   #78849a;

    --esas:      #2dd4bf;
    --esas-tund: #5eead4;
    --esas-acig: #11312e;

    --pulsuz:     #fb923c;
    --pulsuz-fon: #3a2412;

    --yeni: #4ade80; --ela: #4ade80; --yaxsi: #facc15;
    --orta: #fb923c; --zedeli: #f87171;

    --kolge:   0 1px 2px rgba(0,0,0,.4);
    --kolge-2: 0 6px 20px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--metn);
  font-family: var(--yazi);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.qab { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 1.15rem; }

/* ---------- başlıq ---------- */

.bas {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fon) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hasiye);
}
.bas-ic { display: flex; align-items: center; gap: .8rem; min-height: 3.75rem; }

.nisan {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em;
}
.nisan-im {
  width: 1.85rem; height: 1.85rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--esas), #22c55e);
  display: grid; place-items: center;
  color: #fff; font-size: .95rem; font-weight: 800;
}
.bas-sat { margin-inline-start: auto; }

/* ---------- düymələr ---------- */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  padding: .68rem 1.15rem; border-radius: 999px;
  border: 1px solid transparent;
  background: var(--esas); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.dugme:hover { background: var(--esas-tund); box-shadow: var(--kolge-2); }
.dugme:active { transform: translateY(1px); }

.dugme-bos {
  background: var(--seth); color: var(--metn); border-color: var(--hasiye-2);
}
.dugme-bos:hover { background: var(--fon-2); border-color: var(--metn-3); box-shadow: none; }
.dugme-eni { width: 100%; padding: .95rem; font-size: 1rem; }

/* ---------- axtarış ---------- */

.axt {
  display: flex; align-items: center; gap: .55rem;
  background: var(--fon-2); border: 1.5px solid var(--hasiye);
  border-radius: 999px; padding: .3rem .3rem .3rem 1.1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.axt:focus-within {
  border-color: var(--esas);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--esas) 14%, transparent);
}
.axt input {
  flex: 1 1 0; min-width: 0;
  border: 0; background: transparent; color: inherit;
  font-family: inherit; font-size: 1rem; padding: .62rem 0;
}
.axt input:focus { outline: none; }
.axt button {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--esas); color: #fff;
  font-family: inherit; font-weight: 700; font-size: .88rem;
  padding: .62rem 1.15rem;
}
.axt button:hover { background: var(--esas-tund); }

/* ---------- qəhrəman ---------- */

.qehreman { padding: 2rem 0 .4rem; }
.qehreman h1 {
  margin: 0 0 .55rem;
  font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.12;
}
.qehreman h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--esas), #22c55e 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.qehreman p { margin: 0 0 1.35rem; color: var(--metn-2); font-size: 1.02rem; }

/* ---------- bölmə lövhələri ---------- */

.bolmeler {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
  margin: 1.6rem 0 .5rem;
}
@media (min-width: 44rem) { .bolmeler { grid-template-columns: repeat(3, 1fr); } }

.blv {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  min-width: 0; padding: 1rem 1rem 1.05rem;
  border-radius: var(--k); border: 1px solid var(--hasiye);
  background: var(--seth); box-shadow: var(--kolge);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.blv:hover { transform: translateY(-2px); box-shadow: var(--kolge-2); border-color: var(--hasiye-2); }
.blv::after {
  content: ""; position: absolute; inset-inline-end: -28%; top: -60%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: var(--bl, var(--esas)); opacity: .14;
}
.blv b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
  position: relative; z-index: 1; }
.blv > span { font-size: .8rem; color: var(--metn-3); font-weight: 500;
  position: relative; z-index: 1; }
.blv > span.blv-nis {
  width: 2.1rem; height: 2.1rem; border-radius: 9px; margin-bottom: .45rem;
  background: var(--bl, var(--esas)); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  position: relative; z-index: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bl, var(--esas)) 45%, transparent);
}

/* ---------- bölmə başlığı ---------- */

.sec {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2.2rem 0 .95rem;
}
.sec h2 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.025em; }
.sec a { font-size: .87rem; font-weight: 600; color: var(--esas); white-space: nowrap; }

/* ---------- kitab kartları ---------- */

.tor {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem;
}
@media (min-width: 34rem) { .tor { grid-template-columns: repeat(3, 1fr); gap: 1.3rem 1rem; } }
@media (min-width: 52rem) { .tor { grid-template-columns: repeat(4, 1fr); } }

.kart { display: flex; flex-direction: column; min-width: 0; }
.kart:hover .qapaq { transform: translateY(-3px); box-shadow: var(--kolge-2); }

.qapaq {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4; border-radius: var(--k-ki); overflow: hidden;
  background: var(--fon-2); box-shadow: var(--kolge);
  transition: transform .16s ease, box-shadow .16s ease;
}
.qapaq img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* şəkilsiz kitab üçün yaradılan rəngli üz qabığı */
.qapaq-yaz {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: .85rem .75rem .8rem 1.05rem;
  background: linear-gradient(150deg, var(--q1), var(--q2));
  color: #fff;
}
.qapaq-yaz::before {          /* cild tikişi */
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 6px; background: rgba(0,0,0,.18);
}
.qapaq-yaz::after {           /* işıq ləkəsi */
  content: ""; position: absolute; inset-inline-end: -22%; bottom: -28%;
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.13);
}
.qy-ad {
  position: relative;
  font-size: .82rem; font-weight: 800; line-height: 1.28; letter-spacing: -.015em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.qy-alt {
  position: relative;
  font-size: .65rem; font-weight: 600; line-height: 1.3;
  opacity: .88; padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.35);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* elan səhifəsindəki böyük qabıq */
.elan-qapaq .qy-ad { font-size: 1.35rem; -webkit-line-clamp: 6; }
.elan-qapaq .qy-alt { font-size: .88rem; padding-top: .7rem; }
.elan-qapaq .qapaq-yaz { padding: 1.4rem 1.2rem 1.3rem 1.7rem; }

/* kiçik sətir qabığında yalnız başlıq */
.setir .qy-alt { display: none; }
.setir .qy-ad { font-size: .52rem; -webkit-line-clamp: 3; }
.setir .qapaq-yaz { padding: .35rem .3rem .35rem .5rem; }
.setir .qapaq-yaz::before { width: 3px; }

.q0 { --q1:#f97316; --q2:#ea580c; }
.q1 { --q1:#14b8a6; --q2:#0d9488; }
.q2 { --q1:#6366f1; --q2:#4f46e5; }
.q3 { --q1:#ec4899; --q2:#db2777; }
.q4 { --q1:#22c55e; --q2:#16a34a; }
.q5 { --q1:#06b6d4; --q2:#0891b2; }
.q6 { --q1:#eab308; --q2:#ca8a04; }
.q7 { --q1:#ef4444; --q2:#dc2626; }
.q8 { --q1:#8b5cf6; --q2:#7c3aed; }
.q9 { --q1:#3b82f6; --q2:#2563eb; }

.nisanca {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  padding: .26rem .52rem; border-radius: 999px;
  background: var(--pulsuz); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.nisanca-dest { background: rgba(0,0,0,.62); }

.kart h3 {
  margin: .62rem 0 .25rem;
  font-size: .93rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kart-alt { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.kart-qiy { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.kart-qiy.pulsuz { color: var(--pulsuz); }
.vahid { font-size: .78em; font-weight: 600; color: var(--metn-2); margin-inline-start: .1em; }

.meta {
  display: flex; align-items: center; gap: .32rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--metn-3); font-weight: 500;
}
.meta i { font-style: normal; opacity: .55; }

.vez { display: inline-flex; align-items: center; gap: .3rem; }
.vez::before {
  content: ""; width: .48rem; height: .48rem; border-radius: 50%;
  background: var(--v, var(--metn-3)); flex: none;
}
.v-yeni{--v:var(--yeni)} .v-ela{--v:var(--ela)} .v-yaxsi{--v:var(--yaxsi)}
.v-orta{--v:var(--orta)} .v-zedeli{--v:var(--zedeli)}

/* ---------- sətir (kiçik siyahılar üçün) ---------- */

.setir {
  display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .85rem;
  align-items: center; padding: .7rem; border-radius: var(--k-ki);
  transition: background .12s ease;
}
.setir:hover { background: var(--fon-2); }
.setir > * { min-width: 0; }
.setir .qapaq { width: 3.1rem; box-shadow: none; }
.setir h3 { margin: 0 0 .18rem; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.setir .kart-qiy { font-size: .95rem; }

/* ---------- yol ---------- */

.yol {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: 1.15rem 0 0; font-size: .82rem; color: var(--metn-3); font-weight: 500;
}
.yol a:hover { color: var(--esas); }

h1.sehife {
  margin: .55rem 0 .3rem;
  font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800;
  letter-spacing: -.032em; line-height: 1.15;
}
.altyazi { color: var(--metn-2); font-size: .92rem; font-weight: 500; }

/* ---------- elan səhifəsi ---------- */

.elan-tor { display: grid; gap: 1.4rem; margin-top: 1.3rem; }
@media (min-width: 44rem) { .elan-tor { grid-template-columns: 17rem 1fr; gap: 2rem; } }

.elan-qapaq {
  border-radius: var(--k); overflow: hidden; box-shadow: var(--kolge-2);
  max-width: 14rem;
}
@media (min-width: 44rem) { .elan-qapaq { max-width: none; } }
.elan-qapaq .qapaq { border-radius: 0; box-shadow: none; }
.elan-qapaq .qapaq-yaz span { font-size: 1.15rem; -webkit-line-clamp: 6; }

/* Detail page gallery: whole photo, no crop, swipeable on a phone. */
.qalereya {
  display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--k); background: var(--fon-2);
  border: 1px solid var(--hasiye);
  -webkit-overflow-scrolling: touch;
  /* The box takes the first photo's own proportions, set inline from the
     stored image size. The photo then fills it edge to edge with no bars
     and nothing cropped. Very tall photos are capped so they do not push
     the rest of the page off screen. */
  max-height: 72vh;
  margin-inline: auto;
}
.qalereya img {
  flex: 0 0 100%; scroll-snap-align: center;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.qalereya-say {
  margin: .5rem 0 0; font-size: .82rem; color: var(--metn-3); font-weight: 500;
}

.elan-qiy {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; margin: .2rem 0 1rem;
}
.elan-qiy.pulsuz { color: var(--pulsuz); }
.elan-qiy .vahid { font-size: .5em; }

.cip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  padding: .38rem .7rem; border-radius: 999px;
  background: var(--fon-2); border: 1px solid var(--hasiye); color: var(--metn-2);
}
.cipler { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }

.tesvir {
  background: var(--fon-2); border: 1px solid var(--hasiye);
  border-radius: var(--k); padding: .95rem 1.1rem; margin: 0 0 1.2rem;
  font-size: .97rem; color: var(--metn-2); line-height: 1.6;
}

.elaqe { display: grid; gap: .6rem; margin-bottom: 1.2rem; }

.elan-mel { display: grid; gap: .55rem; margin: 0 0 1.3rem; }
.elan-mel div { display: flex; gap: .7rem; font-size: .93rem; }
.elan-mel dt { color: var(--metn-3); min-width: 6.2rem; font-weight: 500; }
.elan-mel dd { margin: 0; font-weight: 600; }
.elan-mel a { color: var(--esas); }

/* ---------- boş hal ---------- */

.bos {
  text-align: center; padding: 3rem 1.2rem; margin: 1.2rem 0;
  border: 1.5px dashed var(--hasiye-2); border-radius: var(--k);
  background: var(--fon-2);
}
.bos p { margin: 0 0 1.15rem; color: var(--metn-2); font-size: 1.02rem; font-weight: 500; }

/* ---------- forma ---------- */

.forma { max-width: 34rem; }
.sahe { margin: 1.35rem 0; }
.sahe > label, .etiket {
  display: block; margin-bottom: .45rem;
  font-size: .88rem; font-weight: 700; color: var(--metn);
}
.sahe input[type=text], .sahe input[type=number], .sahe input[type=tel],
.sahe input[type=search], .sahe textarea, .sahe select {
  width: 100%; font-family: inherit; font-size: 1rem; color: inherit;
  background: var(--seth); border: 1.5px solid var(--hasiye);
  border-radius: var(--k-ki); padding: .78rem .9rem;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.sahe textarea { resize: vertical; }
.sahe input:focus, .sahe textarea:focus, .sahe select:focus {
  outline: none; border-color: var(--esas);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--esas) 14%, transparent);
}
.ipucu { font-size: .84rem; color: var(--metn-3); margin-top: .42rem; }
.xeta { color: var(--zedeli); font-size: .86rem; font-weight: 600; margin-top: .4rem; }

.secimler { display: flex; flex-wrap: wrap; gap: .5rem; }
.secimler label {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--hasiye); background: var(--seth);
  padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
  font-size: .9rem; font-weight: 600;
  transition: all .13s ease;
}
.secimler label:hover { border-color: var(--hasiye-2); }
.secimler input { position: absolute; opacity: 0; pointer-events: none; }
.secimler label:has(input:checked) {
  border-color: var(--esas); background: var(--esas-acig); color: var(--esas-tund);
}

/* Visually hidden but still a real, clickable input. A 0x0 input is
   ignored by some browsers when the label forwards the click. */
.fayl {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.sahe > label.fayl-etiket {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  border: 1.5px dashed var(--hasiye-2); background: var(--fon-2);
  border-radius: var(--k-ki); padding: 1.15rem 1rem; cursor: pointer;
  font-size: .94rem; font-weight: 600; color: var(--metn-2); margin-bottom: 0;
  transition: all .14s ease;
}
.sahe > label.fayl-etiket:hover {
  border-color: var(--esas); background: var(--esas-acig); color: var(--esas-tund);
}
.sahe > label.fayl-etiket::before { content: "＋"; font-size: 1.05rem; }

.neticeler {
  border: 1.5px solid var(--hasiye); border-radius: var(--k-ki);
  background: var(--seth); box-shadow: var(--kolge-2);
  margin-top: .45rem; overflow: hidden;
}
.netice {
  display: block; width: 100%; text-align: start;
  padding: .7rem .9rem; border: 0; border-bottom: 1px solid var(--hasiye);
  background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.netice:last-child { border-bottom: 0; }
.netice:hover { background: var(--esas-acig); }
.netice { font-size: .96rem; font-weight: 600; }
.netice-yeni { color: var(--esas-tund); font-weight: 700; }
.netice-yeni::before { content: "＋ "; }

.secildi {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  border: 1.5px solid var(--esas); background: var(--esas-acig);
  border-radius: var(--k-ki); padding: .75rem .9rem;
}
.secildi b { font-size: .96rem; font-weight: 700; }
.secildi button {
  border: 0; background: transparent; color: var(--esas-tund);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}

.lovber {
  position: sticky; bottom: 0; z-index: 10;
  background: color-mix(in srgb, var(--fon) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hasiye);
  padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom));
  margin-top: 1.6rem;
}

/* ---------- alt ---------- */

.alt {
  border-top: 1px solid var(--hasiye); margin-top: 3.5rem;
  padding: 1.6rem 0 3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem;
  font-size: .86rem; color: var(--metn-3); font-weight: 500;
}
.alt a:hover { color: var(--esas); }

/* avtomatik tapılan bölmə sətri */
.bolme-tapildi {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .55rem; padding: .6rem .85rem;
  background: var(--esas-acig); border: 1px solid color-mix(in srgb, var(--esas) 28%, transparent);
  border-radius: var(--k-ki); font-size: .9rem; color: var(--metn-2);
}
.bolme-tapildi b { color: var(--esas-tund); font-weight: 700; }
.bolme-tapildi button {
  margin-inline-start: auto; border: 0; background: transparent;
  color: var(--esas-tund); font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}

/* geri oxu — yalnız telefonda; kompüterdə yol sətri onsuz da var */
.geri {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; flex: none;
  margin-inline-start: -.5rem;
  border-radius: 50%; color: var(--metn);
  transition: background .13s ease;
}
.geri:hover, .geri:active { background: var(--fon-2); }
@media (min-width: 44rem) { .geri { display: none; } }

/* Seçilmiş şəkillərin önbaxışı — bir-bir əlavə edib çıxarmaq üçün */
.secilmis { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.secilmis:empty { display: none; }
.secilmis-elem { position: relative; width: 4.5rem; aspect-ratio: 1; }
.secilmis-elem img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--k-ki); border: 1px solid var(--hasiye);
}
.secilmis-sil {
  position: absolute; top: -.4rem; inset-inline-end: -.4rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 0; cursor: pointer; line-height: 1;
  background: var(--metn); color: var(--fon);
  font-size: 1rem; font-family: inherit;
  display: grid; place-items: center;
  box-shadow: var(--kolge);
}

/* Şəklə klikləyəndə tam ölçüdə açılır */
.boyudu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 12, 16, .92);
  display: grid; place-items: center;
  padding: 1.5rem;
}
.boyudu img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; border-radius: 6px;
}
.boyudu-bagla {
  position: absolute; top: .9rem; inset-inline-end: .9rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.5rem; line-height: 1; font-family: inherit;
  display: grid; place-items: center;
}
.boyudu-bagla:hover { background: rgba(255,255,255,.26); }
.qalereya img[data-boyut] { cursor: zoom-in; }

/* Böyüdücüdə şəkillər arası keçid */
.boyudu-alt {
  position: absolute; inset-inline: 0; bottom: 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: rgba(255,255,255,.9);
  font-size: .85rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.boyudu-ox {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center;
}
.boyudu-ox:hover { background: rgba(255,255,255,.28); }

/* --- Əlaqə: söhbət qutusu ------------------------------------------------
   Forma yox, yazışma kimi görünür — adam «anket doldururam» hissi keçirmir,
   sadəcə yazır. Cavab da elə buradaca, öz balonunda görünür. */

.sohbet {
  margin: 1.4rem 0 2.2rem;
  border: 1px solid var(--hasiye);
  border-radius: var(--k);
  background: var(--seth);
  box-shadow: var(--kolge);
  overflow: hidden;
  max-width: 40rem;
}

.sohbet-axin {
  padding: 1.1rem 1.1rem .8rem;
  background: var(--fon-2);
  max-height: 26rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.balon {
  max-width: 85%;
  padding: .7rem .9rem;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.5;
}

.balon p { margin: 0; }

.balon-gelen {
  align-self: flex-start;
  background: var(--seth);
  border: 1px solid var(--hasiye);
  border-bottom-left-radius: 4px;
}

.balon-gedn {
  align-self: flex-end;
  background: var(--esas);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.balon-ad {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--esas);
  margin-bottom: .2rem;
}

.balon time {
  display: block;
  margin-top: .35rem;
  font-size: .7rem;
  opacity: .65;
}

.sohbet-qeyd {
  align-self: center;
  text-align: center;
  font-size: .8rem;
  color: var(--metn-2);
  background: var(--esas-acig);
  border-radius: 10px;
  padding: .55rem .8rem;
  max-width: 90%;
}

.sohbet-yaz { padding: .9rem 1.1rem 1.1rem; }

.sohbet-yaz textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--hasiye-2);
  border-radius: var(--k-ki);
  font: inherit;
  font-size: .95rem;
  resize: vertical;
  background: var(--fon);
  color: var(--metn);
}

.sohbet-yaz textarea:focus,
.sohbet-konullu input:focus {
  outline: 2px solid var(--esas);
  outline-offset: -1px;
  border-color: var(--esas);
}

.sohbet-alt {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  margin-top: .6rem;
  flex-wrap: wrap;
}

.sohbet-konullu {
  display: flex;
  gap: .5rem;
  flex: 1;
  min-width: 12rem;
}

.sohbet-konullu input {
  flex: 1;
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--hasiye-2);
  border-radius: var(--k-ki);
  font: inherit;
  font-size: .88rem;
  background: var(--fon);
  color: var(--metn);
}

.sohbet-xeta {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #b91c1c;
  border-radius: var(--k-ki);
  padding: .55rem .75rem;
  font-size: .86rem;
  margin-bottom: .6rem;
}

.sohbet-koku {
  margin: .55rem 0 0;
  font-size: .78rem;
  color: var(--metn-3);
}

.elaqe-birbasa {
  max-width: 40rem;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1px solid var(--hasiye);
  border-radius: var(--k);
  background: var(--seth);
  box-shadow: var(--kolge);
  margin-bottom: 2rem;
}

.elaqe-shexs {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

.elaqe-uz {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--esas), #22c55e);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(13, 148, 136, .3);
}

.elaqe-ad {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
}


.elaqe-dugmeler { display: flex; gap: .6rem; flex-wrap: wrap; }
.elaqe-dugmeler .dugme { flex: 1; min-width: 11rem; text-align: center; }

/* --- Başlıqdakı əlaqə linki və dil seçici ------------------------------- */

.bas-elaqe {
  font-size: .9rem;
  font-weight: 600;
  color: var(--metn-2);
  white-space: nowrap;
}

.bas-elaqe:hover { color: var(--esas); }

/* Əlaqə linki soldan boşluğu yedi, ona görə «yerləşdir» düyməsi artıq
   auto-margin-ə ehtiyac duymur. */
.bas-ic .bas-sat { margin-inline-start: 0; }

/* Sağ qrupu kənara itələyən boşluq buradadır. */
.dil { display: flex; margin-inline-start: auto; }

.dil select {
  appearance: none;
  border: 1px solid var(--hasiye-2);
  border-radius: 999px;
  background: var(--fon);
  color: var(--metn-2);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem 1.55rem .4rem .7rem;
  cursor: pointer;
  /* Aşağı ox: kənar fayl yükləməmək üçün SVG birbaşa içəridədir. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .45rem center;
  background-size: .75rem;
}

.dil select:hover { border-color: var(--metn-3); }
.dil select:focus { outline: 2px solid var(--esas); outline-offset: 1px; }

@media (max-width: 560px) {
  /* Telefonda dördü də sığmalıdır. Ən çox yeri loqonun yazısı tutur və
     onsuz da kitab nişanı saytı tanıdır; əlaqə linki isə gizlənmir,
     çünki insanların onu görməsi tələb olunub. Rus dilində düymə yazısı
     ən uzunudur — ölçü ona görə seçilib. */
  .bas-ic { gap: .5rem; }
  .nisan-yazi { display: none; }
  .bas-elaqe { font-size: .82rem; }
  .dil select { padding-inline: .5rem 1.25rem; font-size: .8rem; }
  .bas-sat { padding-inline: .8rem; font-size: .85rem; }
}