/* Vedic AI Content Studio — ortak stil.
 * index.html (kumanda paneli) ve uret.html (üretim penceresi) tarafından
 * paylaşılır. Palet: siyah/turuncu, yantra geometrisi. */

:root {
  --bg:#050607; --surf:#111315; --surf2:#0a0c0d;
  --line:#1a1d1f; --line2:#1e2124; --line3:#2a2e31; --bezel:#24282b;
  --fg:#f3f1ec; --mut:#9da3a6; --dim:#42484b;
  --acc:#e86f22; --ai:#69e4ec; --onacc:#0b0806;
  --good:#69e4ec; --mid:#9da3a6; --hard:#d1685a;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }
body { margin:0; background:var(--bg); color:var(--fg); overflow-x:hidden;
       font:400 15px/1.55 var(--sans); }

/* --- Yantra arka plan katmanı --- */
#yantra { position:fixed; inset:0; z-index:0; pointer-events:none;
          display:flex; align-items:center; justify-content:center; overflow:hidden; }
#yantra svg { width:min(150vh,1500px); height:min(150vh,1500px); }
#yantra .ln { fill:none; stroke:var(--acc); stroke-opacity:.10; stroke-width:1; }
#yantra .ln2 { fill:none; stroke:var(--acc); stroke-opacity:.06; stroke-width:1; }
#yantra .dt { fill:var(--ai); fill-opacity:.16; }
#yantra .bindu { fill:var(--acc); fill-opacity:.30; }
body > header, body > nav, body > main, body > #lb { position:relative; z-index:1; }

/* --- Hosted Studio oturumu --- */
.studio-auth { position:relative; z-index:3; display:flex; justify-content:flex-end; align-items:center;
  gap:8px; padding:9px 28px; border-bottom:1px solid var(--line); background:rgba(5,6,7,.92);
  color:var(--mut); font:11px/1.3 var(--mono); }
.studio-auth-form { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; width:100%; }
.studio-auth-title, .studio-auth-status { color:var(--acc); letter-spacing:.08em; text-transform:uppercase; }
.studio-auth input { width:180px; padding:8px 10px; background:var(--surf); border:1px solid var(--line2);
  border-radius:7px; color:var(--fg); font:12px var(--sans); }
.studio-auth input:focus { outline:none; border-color:var(--acc); }
.studio-auth-button { padding:8px 11px; border:1px solid var(--acc); border-radius:7px; background:var(--acc);
  color:var(--onacc); font:600 10px/1 var(--mono); cursor:pointer; }
.studio-auth-button.ghost { border-color:var(--line3); background:transparent; color:var(--mut); }
.studio-auth-message { color:var(--mut); }
@media (max-width:700px) { .studio-auth { justify-content:flex-start; padding:9px 16px; }
  .studio-auth-form { justify-content:flex-start; }
  .studio-auth input { flex:1 1 140px; width:auto; } }

/* --- Başlık --- */
header { padding:20px 28px 18px; border-bottom:1px solid var(--line);
         display:flex; align-items:center; gap:16px; background:rgba(5,6,7,.72);
         backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
header img { height:38px; mix-blend-mode:screen; object-fit:contain; }
.kicker { font-family:var(--mono); font-size:10px; letter-spacing:.22em;
          color:var(--mut); text-transform:uppercase; }
h1 { margin:4px 0 0; font-family:var(--serif); font-size:25px; font-weight:300; letter-spacing:0; }
.status { margin-left:auto; font-family:var(--mono); font-size:11px;
          letter-spacing:.06em; color:var(--mut); text-align:right; line-height:1.9; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%;
       margin-right:7px; background:var(--dim); vertical-align:middle; }
.dot.ok { background:var(--ai); box-shadow:0 0 8px rgba(105,228,236,.5); }
.dot.bad { background:var(--hard); }

/* --- Sekmeler --- */
nav { display:flex; gap:2px; padding:0 28px; border-bottom:1px solid var(--line);
      background:rgba(5,6,7,.72); backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px); overflow-x:auto; scrollbar-width:none; }
nav::-webkit-scrollbar { display:none; }
nav button { background:none; border:none; color:var(--mut);
             font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
             padding:15px 15px; cursor:pointer; border-bottom:1px solid transparent;
             white-space:nowrap; transition:color .15s; }
nav button:hover:not(:disabled) { color:var(--fg); }
nav button.active { color:var(--acc); border-bottom-color:var(--acc); }
nav button:disabled { opacity:.32; cursor:not-allowed; }

main { padding:26px 28px 70px; max-width:1280px; }
.row { display:grid; grid-template-columns:312px minmax(0,1fr); gap:22px; align-items:start; }
@media (max-width:900px){ .row { grid-template-columns:minmax(0,1fr); } }

/* --- Kart --- */
.card { background:linear-gradient(160deg,rgba(232,111,34,.035),var(--surf2));
        border:1px solid var(--line3); border-radius:12px; padding:18px 20px;
        min-width:0; overflow-wrap:anywhere; }
.card h2 { margin:0 0 15px; font-family:var(--mono); font-size:10px; letter-spacing:.20em;
           text-transform:uppercase; color:var(--acc); font-weight:500; }
label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
        text-transform:uppercase; color:var(--mut); margin:14px 0 6px; }
input[type=date], select, textarea { width:100%; padding:10px 12px; background:var(--surf);
  border:1px solid var(--line2); border-radius:9px; color:var(--fg); font:inherit; }
input[type=date]:focus, select:focus, textarea:focus { outline:none; border-color:var(--acc); }
input[type=checkbox] { accent-color:var(--acc); width:15px; height:15px; }
.check { display:flex; align-items:center; gap:9px; margin-top:15px; font-size:13.5px; }
.check label { margin:0; font-family:var(--sans); font-size:13.5px; letter-spacing:0;
               text-transform:none; color:var(--fg); }
.btn { width:100%; margin-top:18px; padding:12px; border:1px solid var(--acc); border-radius:9px;
       background:var(--acc); color:var(--onacc); font:600 11px/1 var(--mono);
       letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:opacity .15s; }
.btn:hover:not(:disabled) { opacity:.88; }
.btn:disabled { opacity:.45; cursor:wait; }
.btn.ghost { background:transparent; border-color:var(--line3); color:var(--mut); }
.btn.ghost:hover:not(:disabled) { color:var(--fg); border-color:var(--bezel); }

/* --- Panchanga --- */
.panchanga { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(138px,100%),1fr)); gap:1px;
             background:var(--line2); border:1px solid var(--line2); border-radius:10px; overflow:hidden; }
.pitem { background:var(--surf2); padding:12px 14px; }
.pitem .k { font-family:var(--mono); font-size:9px; letter-spacing:.18em;
            text-transform:uppercase; color:var(--mut); }
.pitem .v { font-family:var(--serif); font-size:17px; font-weight:400; margin-top:5px; line-height:1.3;
            overflow-wrap:anywhere; }

#evPickList { max-height:420px; overflow-y:auto; }
.events { margin-top:14px; font-size:13px; color:var(--mut); overflow-wrap:anywhere; }
.events div { padding:6px 0; border-top:1px solid var(--line2); }

.evitem { background:var(--surf); border:1px solid var(--line2); border-radius:9px;
          padding:11px 13px; margin-top:8px; cursor:pointer; transition:border-color .15s; }
.evitem:hover { border-color:var(--bezel); }
.evitem.selected { border-color:var(--acc);
                   background:linear-gradient(145deg,rgba(232,111,34,.10),var(--surf)); }
.evitem .t { font-family:var(--serif); font-size:16px; overflow-wrap:anywhere; }
.evitem .d { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
             color:var(--mut); margin-top:4px; text-transform:uppercase; }

/* --- Kapak --- */
.cover { border-left:2px solid var(--acc);
         background:linear-gradient(145deg,rgba(232,111,34,.08),var(--surf2)); }
.cover .t { font-family:var(--serif); font-size:26px; font-weight:300; line-height:1.25; }
.cover .s { font-family:var(--mono); font-size:10px; letter-spacing:.18em;
            text-transform:uppercase; color:var(--acc); margin-top:9px; }
.cover .d { margin-top:12px; font-size:14.5px; color:var(--fg); line-height:1.6; }

/* --- Kartlar --- */
.signs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:14px; margin-top:16px; }
.sign { background:var(--surf2); border:1px solid var(--line2); border-radius:12px; padding:16px 17px; }
.sign .head { display:flex; align-items:center; gap:9px; }
.sign .sym { display:inline-flex; align-items:center; justify-content:center;
             width:26px; height:26px; flex:none; border-radius:50%;
             background:var(--acc); color:var(--onacc);
             font-family:"Noto Sans Symbols 2","Segoe UI Symbol",var(--sans);
             font-variant-emoji:text; font-size:14px; line-height:1;
             -webkit-text-fill-color:var(--onacc); }
.sign .name { font-family:var(--serif); font-size:19px; font-weight:400; }
.sign .house { margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
               text-transform:uppercase; padding:4px 9px; border-radius:20px;
               border:1px solid var(--line3); color:var(--mut); text-align:right; }
.sign .house.destekli { color:var(--good); border-color:rgba(105,228,236,.3); }
.sign .house.orta { color:var(--mid); }
.sign .house.zorlayıcı { color:var(--hard); border-color:rgba(209,104,90,.3); }
.sign textarea { margin-top:11px; resize:vertical; line-height:1.55; font-size:14.5px; }
.sign .meta { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em;
              color:var(--fg); margin-top:10px; line-height:1.65; }

.note { color:var(--mut); font-size:13px; line-height:1.6; }
.err { border-color:var(--hard); color:#f0b3aa;
       background:linear-gradient(145deg,rgba(209,104,90,.08),var(--surf2)); }
.badge { display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
         text-transform:uppercase; padding:4px 10px; border-radius:20px;
         border:1px solid rgba(105,228,236,.3); color:var(--ai); }
.soon { padding:60px 20px; text-align:center; color:var(--mut); }
.hidden { display:none; }

/* --- Galeri --- */
.gal { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:12px; margin-top:16px; }
.gal figure { margin:0; border:1px solid var(--line2); border-radius:10px;
              overflow:hidden; background:var(--surf2); }
.gal img { width:100%; display:block; cursor:zoom-in; }
.gal figcaption { display:flex; align-items:center; gap:8px; padding:9px 11px;
                  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
                  text-transform:uppercase; color:var(--mut); border-top:1px solid var(--line2); }
.gal figcaption a { margin-left:auto; color:var(--acc); text-decoration:none; }
.galbar { display:flex; align-items:center; gap:12px; margin:18px 0 0; flex-wrap:wrap; }
.galbar button, .galbar a.dlall { background:var(--acc); color:var(--onacc); border:none;
  border-radius:9px; padding:10px 18px; font:600 10px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; text-decoration:none; }
.galbar button:disabled { opacity:.45; cursor:wait; }

/* --- Lightbox --- */
#lb { position:fixed; inset:0; background:rgba(5,6,7,.95); z-index:50;
      display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#lb.hidden { display:none; }
#lb img { max-width:88vw; max-height:76vh; border-radius:10px;
          border:1px solid var(--line3); box-shadow:0 24px 70px rgba(0,0,0,.7); }
#lb .bar { display:flex; align-items:center; gap:16px; font-family:var(--mono);
           font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
#lb .bar button, #lb .bar a { background:var(--surf); border:1px solid var(--line3); color:var(--fg);
  border-radius:9px; padding:9px 15px; font:inherit; cursor:pointer; text-decoration:none; }
#lb .bar button:hover:not(:disabled), #lb .bar a:hover { border-color:var(--acc); color:var(--acc); }
#lb .bar button:disabled { opacity:.3; cursor:default; }

::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line3); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--bezel); }
::selection { background:var(--acc); color:var(--onacc); }

/* --- Mobil / dar ekran --- */
@media (max-width:640px) {
  header { padding:14px 16px 12px; gap:12px; }
  header img { height:30px; }
  h1 { font-size:19px; margin-top:2px; }
  .kicker { font-size:9px; letter-spacing:.18em; }
  .status { font-size:9px; line-height:1.8; }
  nav { padding:0 16px; }
  nav button { padding:13px 11px; font-size:10px; letter-spacing:.10em; }
  main { padding:16px 16px 56px; }
  .row { gap:14px; }
  .card { padding:15px 16px; }
  .cover .t { font-size:21px; }
  .signs { gap:12px; }
  .sign { padding:14px 15px; }
  .sign .head { flex-wrap:wrap; }
  .sign .house { margin-left:auto; }
  #lb img { max-width:94vw; max-height:66vh; }
  #lb .bar { flex-wrap:wrap; justify-content:center; padding:0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
