/* ============================================================
   TALPA Kültür & Sanat — Editorial design system  (v2)
   Gallery / cultural-programme aesthetic
   Type:  Spectral (display, readable editorial serif)
          IBM Plex Sans (body/UI)  ·  IBM Plex Mono (labels, data)
   Paper · ink · antique gold · deep navy accent
   ============================================================ */

:root{
  /* paper / ink — warm gallery neutrals */
  --paper:#f5f1e8;
  --paper-2:#efe9dc;
  --paper-3:#e7e0d0;
  --card:#fbf9f3;
  --ink:#1d1b16;
  --ink-2:#46423a;
  --muted:#8b8475;
  --faint:#a9a294;

  /* hairlines */
  --line:#d7d0bf;
  --line-soft:#e3ddce;
  --line-ink:#1d1b16;

  /* brand accents (logo-aligned) */
  --gold:#9c7c45;
  --gold-deep:#7e6334;
  --gold-soft:#c7b288;
  --gold-wash:#ece3d0;
  --navy:#1b304f;
  --navy-2:#24406a;
  --navy-deep:#142539;
  --navy-ink:#0f1d30;
  --navy-wash:#e2e6ee;
  --navy-line:#46587a;
  --red:#a83228;
  --red-deep:#8a261d;

  /* status (muted, editorial) */
  --ok:#4d6b4a;        --ok-bg:#e6ece0;
  --warn:#9a6a1f;      --warn-bg:#f0e6d2;
  --danger:#9c3a2f;    --danger-bg:#f0e0db;
  --info:#3a5670;      --info-bg:#e3e9ef;

  /* type families (names kept stable for inheritance) */
  --font-display:'Spectral',Georgia,'Times New Roman',serif;
  --font-ui:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;

  /* sharp editorial radii */
  --r-sm:2px; --r:3px; --r-lg:4px; --r-xl:6px;

  /* whisper-soft shadows */
  --shadow-sm:0 1px 2px rgba(29,27,22,.05);
  --shadow:0 8px 30px rgba(29,27,22,.07);
  --shadow-lg:0 24px 60px rgba(29,27,22,.13);

  --ring:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--paper);
  font-size:15.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:none;box-shadow:var(--ring);}

/* default icon sizing */
svg.ic{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:middle;stroke-width:1.6;}

/* ---------------- Typography ---------------- */
h1,h2,h3,h4{margin:0;line-height:1.05;font-weight:600;}
.display{
  font-family:var(--font-display);
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-.005em;
  line-height:1.04;
  font-variant-numeric:lining-nums proportional-nums;
}
/* Spectral defaults to readable lining figures everywhere display serif sets numbers */
.serif,.serif-it,.display{font-variant-numeric:lining-nums proportional-nums;}
.serif{font-family:var(--font-display);}
.serif-it{font-family:var(--font-display);font-style:italic;font-weight:600;}
p{margin:0 0 1em;text-wrap:pretty;}

/* eyebrow / kicker — mono, restrained */
.kicker{
  font-family:var(--font-mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.85em;
}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;display:inline-block;opacity:.8;}
.kicker.no-rule::before{display:none;}
.kicker.on-dark{color:var(--gold-soft);}

/* mono label / metadata */
.meta-mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);}
.idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--gold-deep);}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;
  padding:.95em 1.5em;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;line-height:1;
}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn svg{width:1.25em;height:1.25em;stroke-width:1.7;}
.btn-navy{--bg:var(--navy);--fg:var(--paper);--bd:var(--navy);}
.btn-navy:hover{--bg:transparent;--fg:var(--navy);--bd:var(--navy);}
.btn-gold{--bg:var(--gold);--fg:#fff;--bd:var(--gold);}
.btn-gold:hover{--bg:var(--gold-deep);--fg:#fff;--bd:var(--gold-deep);}
.btn-red{--bg:var(--red);--fg:#fff;--bd:var(--red);}
.btn-red:hover{--bg:var(--red-deep);--fg:#fff;--bd:var(--red-deep);}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink);}
.btn-soft{--bg:transparent;--fg:var(--ink);--bd:var(--line);}
.btn-soft:hover{--bg:var(--navy);--fg:var(--paper);--bd:var(--navy);}
.btn-lg{font-size:13px;padding:1.1em 2em;}
.btn-sm{font-size:13px;padding:.75em 1.2em;letter-spacing:.08em;}
.btn-block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none;}

/* text link */
.link{
  color:var(--ink);font-weight:500;cursor:pointer;
  border-bottom:1px solid var(--gold);padding-bottom:1px;transition:border-color .15s,color .15s;
}
.link:hover{color:var(--gold-deep);border-color:var(--gold-deep);}

/* ---------------- Badges ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.42em .7em;border-radius:var(--r-sm);line-height:1;
  background:transparent;color:var(--ink-2);border:1px solid var(--line);
}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge-ok{background:var(--ok-bg);color:var(--ok);border-color:transparent;}
.badge-warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;}
.badge-danger{background:var(--danger-bg);color:var(--danger);border-color:transparent;}
.badge-info{background:var(--info-bg);color:var(--info);border-color:transparent;}
.badge-gold{background:var(--gold-wash);color:var(--gold-deep);border-color:transparent;}
.badge-navy{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.badge-outline{background:transparent;border:1px solid var(--line);color:var(--ink-2);}

.cat{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}

/* ---------------- Forms ---------------- */
.field{margin-bottom:20px;}
.field > label,.label{
  display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-2);margin-bottom:9px;
}
.label .req{color:var(--red);}
.hint{font-size:13px;color:var(--muted);margin-top:7px;}
.input,.select,.textarea{
  width:100%;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.75em .9em;transition:border-color .15s,box-shadow .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--faint);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);box-shadow:none;}
.input:disabled,.input[readonly]{background:var(--paper-2);color:var(--ink-2);}
.textarea{resize:vertical;min-height:120px;line-height:1.55;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center;padding-right:2.4em;}
.input-lg{font-size:18px;padding:.85em 1em;}

.check{display:flex;gap:.7em;align-items:flex-start;cursor:pointer;font-size:14px;color:var(--ink-2);line-height:1.5;}
.check input{appearance:none;flex:0 0 auto;width:19px;height:19px;border:1px solid var(--line);border-radius:2px;background:var(--card);margin-top:1px;cursor:pointer;position:relative;transition:.15s;}
.check input:checked{background:var(--ink);border-color:var(--ink);}
.check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg);}
.check input:focus-visible{box-shadow:var(--ring);}

/* ---------------- Cards / surfaces ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);}
.surface{background:var(--card);border:1px solid var(--line);border-radius:var(--r);}

/* ---------------- Artistic poster placeholder ---------------- */
.poster{position:relative;overflow:hidden;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;}
.poster::before{content:"";position:absolute;inset:0;background:var(--poster-grad,linear-gradient(155deg,#26405f,#152a44));}
.poster .poster-inner{position:relative;z-index:2;padding:18px;width:100%;}

/* duotone-ish artistic gradients + paper grain via mask */
.g-jazz{--poster-grad:linear-gradient(155deg,#3c2f4e 0%,#241a33 60%,#140e20 100%);--poster-ink:#d8c7e6;}
.g-stage{--poster-grad:linear-gradient(155deg,#6e2a2c 0%,#3a1416 60%,#1d090a 100%);--poster-ink:#e7c4b2;}
.g-classic{--poster-grad:linear-gradient(155deg,#2a3f5c 0%,#16263d 58%,#0c1929 100%);--poster-ink:#c3d2e6;}
.g-comedy{--poster-grad:linear-gradient(155deg,#9a6a25 0%,#5f3d11 60%,#2c1c06 100%);--poster-ink:#f0dcb0;}
.g-art{--poster-grad:linear-gradient(155deg,#27574e 0%,#143630 60%,#08201c 100%);--poster-ink:#bfe0d4;}
.g-film{--poster-grad:linear-gradient(155deg,#3a3d4a 0%,#222531 60%,#11131a 100%);--poster-ink:#cfd3df;}

/* ---------------- Layout helpers ---------------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 40px;}
.container-wide{max-width:1400px;}
.section{padding:96px 0;}
.eyebrow-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.grid{display:grid;}
.muted{color:var(--muted);}
.gold-text{color:var(--gold-deep);}
.navy-text{color:var(--ink);}
.center{text-align:center;}
.divider{height:1px;background:var(--line);border:0;margin:0;}
.rule{height:1px;background:var(--ink);border:0;margin:0;opacity:.85;}
.rule-soft{height:1px;background:var(--line);border:0;margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* price — editorial */
.price{display:inline-flex;align-items:baseline;gap:.55em;font-family:var(--font-mono);}
.price .was{color:var(--muted);text-decoration:line-through;font-size:.82em;}
.price .now{font-weight:500;color:var(--ink);font-size:1.05em;}
.price .cur{font-size:.7em;color:var(--gold-deep);}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px;}
table.tbl thead th{
  text-align:left;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:15px 18px;background:transparent;border-bottom:1px solid var(--ink);white-space:nowrap;
}
table.tbl tbody td{padding:15px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
table.tbl tbody tr:last-child td{border-bottom:0;}
table.tbl tbody tr{transition:background .12s;}
table.tbl tbody tr:hover{background:var(--paper-2);}
table.tbl tbody tr.clickable{cursor:pointer;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.01em;font-size:.95em;}

/* progress — thin */
.prog{height:3px;border-radius:0;background:var(--paper-3);overflow:hidden;}
.prog > span{display:block;height:100%;background:var(--gold);}
.prog.high > span{background:var(--red);}

/* icon button */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:.15s;}
.iconbtn:hover{border-color:var(--ink);color:var(--ink);background:transparent;}
.iconbtn svg{width:16px;height:16px;stroke-width:1.6;}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(160%);z-index:200;background:var(--navy);color:var(--paper);padding:15px 24px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;display:flex;align-items:center;gap:.7em;transition:transform .4s cubic-bezier(.2,.8,.2,1);max-width:90vw;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast svg{width:18px;height:18px;color:var(--gold-soft);}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(20,18,14,.55);backdrop-filter:blur(2px);z-index:150;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-back.show{opacity:1;pointer-events:auto;}
.modal{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);max-width:520px;width:100%;transform:translateY(12px);transition:transform .22s;max-height:88vh;overflow:auto;border:1px solid var(--line);}
.modal-back.show .modal{transform:none;}

@media (max-width:760px){
  .section{padding:60px 0;}
  .container{padding:0 22px;}
}

/* ---------------- Motion: page transition + scroll reveal ---------------- */
@keyframes pageOut{from{opacity:1;}to{opacity:0;}}
@media (prefers-reduced-motion:no-preference){
  body.leaving{animation:pageOut .23s ease forwards;}
}
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .66s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0ms);}
.js-reveal [data-reveal].in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}