/* Loader4D — professional load-planning UI. Blueprint-precision light theme. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap'); :root{ --ink:#10233b; --ink-2:#33465e; --muted:#6b7c93; --dim:#93a1b5; --bg:#eef2f7; --bg-2:#f6f9fc; --panel:#ffffff; --line:#dce4ee; --line-2:#eaeff6; --blue:#2f6bff; --blue-ink:#1d4fd6; --teal:#12b5ab; --teal-ink:#0e938b; --amber:#f0a92e; --pink:#e06c9f; --red:#e5484d; --green:#2fa96a; /* Logodaki "4D" ve ozellik ikonlari. Tonu 194°, koyu bir camgobegi. Beyaz uzerinde 9.64:1 kontrast verir (onceki --teal-ink 3.77:1'di). KOYU ZEMINDE KULLANILAMAZ: lacivert posta basliginda 1.79:1'e duser, orasi icin ayni tonun acigi (#00B1E6) kullanilir. */ --brand-4d:#004B61; --brand-4d-lt:#00B1E6; /* Ikon kutusu: marka rengiyle ayni ailede soguk bir zemin. Eskiden nane yesiliydi; camgobegi ikonun altinda uyumsuz duruyordu. */ --chip-a:#eef7fa; --chip-b:#dceef4; --chip-ring:rgba(0,75,97,.15); --shadow:0 1px 2px rgba(16,35,59,.06), 0 8px 24px rgba(16,35,59,.06); --shadow-sm:0 1px 2px rgba(16,35,59,.08); --r:12px; --r-sm:9px; --r-lg:16px; --grid:linear-gradient(#e7edf5 1px,transparent 1px),linear-gradient(90deg,#e7edf5 1px,transparent 1px); --font:'Inter',system-ui,sans-serif; --display:'Space Grotesk',var(--font); --mono:'JetBrains Mono',monospace; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5; background-image:var(--grid);background-size:26px 26px;min-height:100vh;display:flex;flex-direction:column} main{flex:1 0 auto} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;color:var(--ink);margin:0} h1{font-size:1.6rem;font-weight:700} .container{max-width:1240px;margin:0 auto;padding:0 22px} .muted{color:var(--muted)}.dim{color:var(--dim)}.hidden{display:none!important} .mono{font-family:var(--mono)} .v{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---- top bar ---- */ .topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px); border-bottom:1px solid var(--line)} .topbar .inner{display:flex;align-items:center;justify-content:space-between;height:62px} .nav-links{display:flex;align-items:center;gap:6px} .nav-links a{color:var(--ink-2);font-weight:500;font-size:.92rem;padding:8px 12px;border-radius:8px} .nav-links a:hover{background:var(--bg-2);text-decoration:none;color:var(--ink)} .nav-links a.active{color:var(--blue-ink);background:#eaf0ff} .chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--ink-2); background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px} /* ---- logo ---- */ /* "Loader" gri, "4D" marka renginde. Ikisi de koyu oldugunda (lacivert + #004B61) aralarindaki fark 1.64:1'e dusuyor ve isim tek renk gibi okunuyordu; gri zemin farki 2.26:1'e cikarip "4D"yi one cikariyor. */ .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700; font-size:1.15rem;color:var(--muted);letter-spacing:-.02em} /* Isaret artik satir ici SVG degil, favicon.svg'nin kendisi (bkz. _Logo.cshtml). Boyut kurallari hem hem icin gecerli olmali ki gecis sirasinda ya da ileride bir yerde eski isaretleme kalirsa logo buyuyup kucumesin. */ .logo img{display:block;flex:none} /* Marka adi tek bir flex ogesi: aksi halde .logo'nun gap degeri "Loader" ile "4D" arasina da bosluk koyar ve isim ayrik gorunur. */ .logo .wm{display:inline-flex;align-items:baseline} .logo b{color:var(--brand-4d);font-weight:700} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid var(--line); background:var(--panel);color:var(--ink);font-family:var(--font);font-weight:600;font-size:.9rem; padding:9px 16px;border-radius:var(--r-sm);transition:.15s;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-sm)} .btn:hover{border-color:#c6d2e2;text-decoration:none;transform:translateY(-1px)} .btn:active{transform:none} .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn-primary:hover{background:var(--blue-ink);border-color:var(--blue-ink)} .btn-teal{background:var(--teal);border-color:var(--teal);color:#fff} .btn-teal:hover{background:var(--teal-ink);border-color:var(--teal-ink)} .btn-ghost{background:transparent;box-shadow:none} .btn-ghost:hover{background:var(--bg-2)} .btn-danger{background:#fff;border-color:#f3c2c4;color:var(--red)} .btn-danger:hover{background:#fdeded;border-color:var(--red)} .btn-sm{padding:6px 11px;font-size:.82rem;border-radius:7px} .btn-lg{padding:12px 22px;font-size:1rem} .btn.on{background:#eaf0ff;border-color:#b9ccff;color:var(--blue-ink);box-shadow:none} .btn[disabled]{opacity:.55;cursor:default;transform:none} /* ---- panels ---- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)} .panel h3{font-size:.98rem;margin-bottom:14px;display:flex;align-items:center;gap:8px} .panel-title{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);margin-bottom:12px} /* ---- fields ---- */ .field{margin-bottom:14px} .field label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.01em} input,select,textarea{width:100%;font-family:var(--font);font-size:.92rem;color:var(--ink);background:var(--bg-2); border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;transition:.15s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(47,107,255,.12)} input[type=color]{padding:3px;height:40px;cursor:pointer} input[type=checkbox]{width:auto} .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* toggle chips for constraints */ .toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .toggle{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--bg-2);cursor:pointer;font-size:.82rem;font-weight:500;color:var(--ink-2);user-select:none} .toggle input{width:auto;margin:0} .toggle.on{background:#e9faf8;border-color:#9fe4de;color:var(--teal-ink)} /* ---- tables ---- */ table{width:100%;border-collapse:collapse;font-size:.88rem} thead th{text-align:left;font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);padding:12px 14px;background:var(--bg-2);border-bottom:1px solid var(--line)} tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--bg-2)} /* ---- badges / status ---- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--ink-2); background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:8px;padding:6px 10px} .tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:3px 8px;border-radius:6px} .tag-teal{background:#e3f7f5;color:var(--teal-ink)} .tag-blue{background:#eaf0ff;color:var(--blue-ink)} .tag-amber{background:#fdf2df;color:#a9741a} .tag-red{background:#fdeaea;color:var(--red)} /* ---- editor layout ---- */ .workspace{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start;padding:16px 0 32px} .sidecol{display:flex;flex-direction:column;gap:14px} .viewer-wrap{position:relative;background:#0f1b2d;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;min-height:620px;box-shadow:var(--shadow)} .viewer-wrap canvas{display:block;width:100%;height:100%;min-height:620px} .viewer-overlay{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;z-index:5} .viewer-controls{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center;z-index:5} .viewer-controls .badge a{color:var(--ink);padding:0 4px} /* container info panel (bottom of viewer) */ .infopanel{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid; grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)} .infopanel .cell{background:rgba(255,255,255,.96);padding:10px 12px;display:flex;flex-direction:column;gap:2px} .infopanel .k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600} .infopanel .val{font-family:var(--mono);font-weight:600;font-size:.98rem;color:var(--ink)} .infopanel .val.warn{color:var(--red)} /* ---- item rows ---- */ .item-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm); margin-bottom:8px;background:var(--panel)} .sw{display:inline-block;width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08);vertical-align:middle;flex:none} .item-row .sw{width:22px;height:22px;border-radius:6px;flex:none;border:1px solid rgba(0,0,0,.08)} .item-row .nm{font-weight:600;font-size:.9rem} .item-row .dm{font-size:.76rem;color:var(--muted);font-family:var(--mono)} .item-row .qt{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--ink-2);font-size:.86rem} .item-row .cst{display:inline-flex;gap:3px} /* Metin sutunu KUCULEBILIR olmali. Flex ogesinin varsayilan min-width'i auto'dur; yani icerigi kadar genis kalir ve satiri disari tasirir. Metrikte fark edilmiyordu ("120×100×40"), imperial'e gecince ayni satir "47.24×39.37×15.75" oluyor ve rozet ile dugmeler satirin disina itiliyordu — kullanicinin gordugu "kayma" buydu. Cozum birim tarafinda degil duzen tarafinda: sutun kuculebilsin, ad kirpilsin, olculer alt satira sarsin. */ .item-row .itx{flex:1;min-width:0} .item-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item-row .dm{overflow-wrap:anywhere} /* Rozet ve dugmeler ASLA sikismasin: kuculecek olan metindir. */ .item-row>.tag,.item-row>.qt,.item-row>.btn,.item-row .ish,.item-row .drag-handle{flex:none} /* optimizasyona dahil et / etme */ .ien{flex:none;width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--blue-ink)} /* Devre disi satir SOLUR ama okunur kalir: kullanici neyi disarida biraktigini gormeye devam etmeli. Tik ve silme dugmesi tam opaklikta birakilir, yoksa geri acmak icin tiklanacak kontrol de silikleserdi. */ .item-row.off{background:var(--panel-2,#f7f8fa);border-style:dashed} .item-row.off .ish,.item-row.off .nm,.item-row.off .dm{opacity:.45} .item-row.off .nm{text-decoration:line-through;text-decoration-thickness:1px} .tag-off{background:#eef0f3;color:var(--dim)} /* group header */ .group-head{display:flex;align-items:center;gap:8px;padding:8px 4px;margin-top:6px;border-top:1px dashed var(--line)} .group-head .gname{font-family:var(--display);font-weight:600;font-size:.85rem} .group-head .gcount{font-family:var(--mono);font-size:.72rem;color:var(--dim)} /* utilisation bars */ .util{margin:10px 0} .util .top{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:5px;color:var(--ink-2)} .util .top b{font-family:var(--mono)} .util .bar{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden} .util .bar i{display:block;height:100%;border-radius:99px} /* stat trio */ .stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;text-align:center} .stat .n{font-family:var(--mono);font-size:1.4rem;font-weight:600} .stat .l{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:2px} /* thumbnails grid (shipments) */ .grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.15s} .card:hover{transform:translateY(-2px);border-color:#c6d2e2} .card .thumb{aspect-ratio:16/10;background:#0f1b2d center/cover;display:grid;place-items:center;color:#3a4a63} .card .body{padding:14px} .card .body h3{font-size:1rem} /* palette (manual) */ .palette-item{cursor:pointer} .palette-item.armed{border-color:var(--blue);background:#eef4ff} /* hero / landing */ .hero{position:relative;padding:76px 0 60px;overflow:hidden} .hero .eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)} .hero h1{font-size:3rem;line-height:1.05;margin:14px 0;max-width:15ch} .hero p{font-size:1.1rem;color:var(--muted);max-width:52ch} .hero .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 0 70px} .feature{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px; box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s,transform .18s} .feature:hover{border-color:#c3dde6;box-shadow:var(--shadow);transform:translateY(-2px)} /* Ikon kutusu: duz zemin yerine ince bir halka ve yumusak gecis. Emoji doneminden kalan font-size'a artik gerek yok, olcuyu svg'nin kendisi verir. */ .feature .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center; margin-bottom:13px;color:var(--brand-4d); background:linear-gradient(160deg,var(--chip-a),var(--chip-b)); box-shadow:inset 0 0 0 1px var(--chip-ring)} .feature .ic svg{width:21px;height:21px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .feature:hover .ic{background:linear-gradient(160deg,#e6f3f8,#cfe7f0)} .feature h3{font-size:1rem;margin-bottom:6px} .feature p{font-size:.88rem;color:var(--muted);margin:0} /* spinner */ .spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%; display:inline-block;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* footer */ footer{border-top:1px solid var(--line);padding:26px 0;color:var(--dim);font-size:.84rem;background:var(--panel);flex-shrink:0} /* report / print */ .report{max-width:900px;margin:0 auto;background:#fff;padding:34px;border-radius:var(--r);box-shadow:var(--shadow)} .report .views{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .report .views figure{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .report .views img{width:100%;display:block;background:#0f1b2d} .report .views figcaption{text-align:center;font-size:.8rem;padding:6px;color:var(--muted);border-top:1px solid var(--line)} /* Rapordaki her alan (konteyner) için ayrı görsel blok */ .report-space{margin-top:16px} .report-space-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px; padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);font-size:.86rem} .report-space-head .muted{font-size:.8rem} /* ---- rapor: strateji rozetleri ---- */ .strat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .schip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line); border-left:3px solid var(--teal);border-radius:7px;padding:4px 9px;font-size:.78rem;background:var(--bg-2)} .schip b{font-weight:600;color:var(--ink)} .schip .sv{color:var(--muted);font-family:var(--mono);font-size:.72rem} /* ---- rapor: aks yükü tablosu ---- */ .sub-head{margin:12px 0 4px;font-size:.85rem;color:var(--ink)} .axle-table .bar{display:inline-block;width:56px;height:5px;border-radius:3px;background:#e3e9f2; margin-left:7px;vertical-align:middle;overflow:hidden} .axle-table .bar i{display:block;height:100%;background:var(--teal)} /* Sınırı aşan aks satırı: renk TEK başına taşıyıcı değil — "Limit aşıldı" etiketi de aynı satırda duruyor, siyah-beyaz baskıda bilgi kaybolmuyor. */ .axle-table tr.over td{background:#fff6f6} .axle-table tr.over .bar i{background:var(--red)} /* ---- rapor: yük kısıt simgeleri ---- */ /* Simgeler 3B sahnedekilerle aynı; altta bir açıklama satırı var. Renk yalnızca destek: baskıda gri kalsa da simge ve açıklama okunur. */ .flags{white-space:nowrap} .flags .fl{display:inline-block;min-width:19px;text-align:center;border:1px solid var(--line); border-radius:5px;padding:0 4px;margin-right:3px;font-size:.78rem;color:var(--ink-2);background:var(--bg-2)} .flags .fl.oog{border-color:#f3dca6;background:#fdf6e8;color:#8a5b09} .flag-legend{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0} .flag-legend b{color:var(--ink)} @media print{ body{background:#fff}.topbar,footer,.no-print{display:none!important} .report{box-shadow:none;border-radius:0;max-width:100%;padding:0} /* Her alan mümkünse kendi sayfasında ve bölünmeden yazdırılsın */ .report-space{break-inside:avoid;page-break-inside:avoid} .report-space + .report-space{break-before:page;page-break-before:always} .report .views figure{break-inside:avoid;page-break-inside:avoid} /* Aks tablosu ve strateji özeti sayfa sonunda ikiye bölünmesin: yarısı bir sayfada kalan bir aks listesi okunmuyor. */ .axle-table,.strat-chips,.flag-legend{break-inside:avoid;page-break-inside:avoid} .axle-table tr.over td{background:#f4f4f4} } @media(max-width:960px){ .workspace{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr} .hero h1{font-size:2.2rem} .infopanel{grid-template-columns:repeat(3,1fr)} } :focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============ Full-screen editor stage (cargoLoader-style) ============ */ .stage{position:relative;width:100%;height:calc(100vh - 70px);overflow:hidden;background:#f1f5fa; background-image:var(--grid);background-size:26px 26px} /* Mobil tarayicilarda 100vh, adres cubugu GORUNURKEN bile gizliymis gibi olculur: sahne ekrandan tasar ve alt kenardaki aksiyon dugmeleri cubugun arkasinda kalir. dvh gercek gorunur yuksekligi verir. Ayri bir kural olarak yazildi; destegi olmayan eski tarayici ustteki satirda kalir. */ @supports (height:100dvh){ .stage{height:calc(100dvh - 70px)} } .stage-viewer{position:absolute;inset:0} /* touch-action:none — dokunmatikte sahneyi dondurebilmenin SARTI. Bu satir olmadan tarayici tek parmak hareketini once "sayfa kaydiriliyor olabilir" diye bekletir, sonra jesti kendine alir ve pointermove olaylarini kesar. Kullanicinin gordugu sey, biraz donup takilan bir sahnedir — sahadan "cevirmek cok zor" diye bildirildi. Iki parmakla yakinlastirma da ayni sebeple guvenilmez calisiyordu. Sahne zaten kendi kaydirma ve yakinlastirmasini yonetiyor; tarayicinin varsayilan jestlerine burada ihtiyac yok. */ .stage-viewer canvas{display:block;width:100%;height:100%;touch-action:none} /* left floating panel */ /* Genislik dort sekmenin EN UZUN CEVIRISINE gore secildi: Almanca ve Ispanyolca toplam 32 karakter ("Bereich Ladungen Strategie Ergebnis"). 372 pikselde bunlar uc noktayla kirpiliyordu. */ .stage-panel{position:absolute;top:16px;left:16px;bottom:96px;width:412px;z-index:20; background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); display:flex;flex-direction:column;transition:transform .25s ease,opacity .2s} .stage-panel.collapsed{transform:translateX(-420px);opacity:0;pointer-events:none} .panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)} /* Dort sekme dar panelde ve uzun cevirilerde (ör. "Результат") tasmamali: esnek genislik + kirpilmayan tek satir + daralinca kucullen yazi. */ .panel-tabs{display:flex;gap:2px;flex:1;min-width:0} /* flex:1 1 auto + esit paylasim: sekmeler bos alani paylasir, uzun ceviride hepsi ayni oranda daralir. text-overflow yalnizca son care olarak durur. */ .panel-tabs button{border:none;background:transparent;font-family:var(--display);font-weight:600;font-size:.85rem; color:var(--muted);padding:7px 6px;border-radius:9px;cursor:pointer;white-space:nowrap; min-width:0;flex:1 1 auto;text-align:center;overflow:hidden;text-overflow:ellipsis} .panel-tabs button.on{background:#eaf0ff;color:var(--blue-ink)} .panel-body{flex:1;overflow-y:auto;padding:16px} .icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer; display:grid;place-items:center;color:var(--ink-2);font-size:1rem;flex:none} .icon-btn:hover{background:var(--bg-2)} /* Icerik ORTALANIR. Onceden hicbir hizalama kurali yoktu; dugme metni varsayilan satir kutusuna kaliyor ve ikon kutunun icinde kayik duruyordu. display:flex burada guvenli — gizleme .stage-open.off ile yapiliyor ve o secici daha ozgul oldugu icin bu satiri her zaman eziyor. */ .stage-open{position:absolute;top:16px;left:16px;z-index:20;width:44px;height:44px;border-radius:12px; border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);cursor:pointer;color:var(--ink); display:flex;align-items:center;justify-content:center;padding:0;line-height:1} .stage-open svg{width:22px;height:22px} /* Masaustunde panel ACIKKEN gizlenir: panel de top:16/left:16'da duruyor, dugme tam altinda kalir ve tiklanamaz. Dar ekranda panel asagi indigi icin bu kural devre disi birakiliyor (bkz. 900px blogu). */ .stage-open.off{display:none} /* right vertical toolbar */ .stage-tools{position:absolute;top:16px;right:16px;z-index:20;display:flex;flex-direction:column;gap:10px} /* Arac cubugunu acan dugme. Masaustunde YOK: orada cubuk zaten hep acik ve sahneye deymiyor. Yalnizca 900px altinda gorunur (bkz. asagidaki blok). */ .stage-toolsbtn{position:absolute;top:16px;right:16px;z-index:21;display:none; width:46px;height:46px;border-radius:12px;border:1px solid var(--line); background:#fff;box-shadow:var(--shadow-sm);cursor:pointer; align-items:center;justify-content:center;color:var(--ink-2);padding:0} .stage-toolsbtn svg{width:22px;height:22px} .stage-toolsbtn.on{background:var(--blue);border-color:var(--blue);color:#fff} /* Manuel cubugunu ac/kapa. Masaustunde YOK: cubuk orada tek satira siginiyor. */ .man-toggle{display:none;align-items:center;justify-content:center;flex:none; width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:#fff;cursor:pointer;color:var(--ink-2);padding:0} .man-toggle svg{width:20px;height:20px} .man-toggle.on{background:var(--teal,#12b5ab);border-color:var(--teal,#12b5ab);color:#fff} /* Kaydedilmemis manuel degisiklik varken Kaydet dugmesi kendini belli eder. Halka disaridan cizilir (box-shadow), boylece dugmenin olcusu degismez ve yanindaki dugmeler kaydedilmemis durumda yerinden oynamaz. */ #mSave.dirty{box-shadow:0 0 0 3px rgba(47,107,255,.28)} #mSave.dirty::after{content:'•';margin-left:6px;font-size:1.1em;line-height:0} .tool{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm); cursor:pointer;display:grid;place-items:center;font-size:1.15rem;color:var(--ink-2);transition:.15s;position:relative} .tool:hover{background:var(--bg-2);transform:translateY(-1px)} .tool.on{background:var(--teal);border-color:var(--teal);color:#fff} .tool[data-tip]:hover::after{content:attr(data-tip);position:absolute;right:56px;top:50%;transform:translateY(-50%); background:var(--ink);color:#fff;font-size:.74rem;padding:5px 9px;border-radius:7px;white-space:nowrap} /* orientation cube */ .stage-cube{position:absolute;top:80px;right:80px;z-index:15;width:96px;height:96px;pointer-events:none;opacity:.9} .stage-cube svg{width:100%;height:100%} .stage-cube text{cursor:pointer;pointer-events:auto} /* container navigation */ .stage-nav{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:6px; background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);padding:6px 10px;font-size:.86rem;font-weight:600} .stage-nav button{border:none;background:transparent;cursor:pointer;font-size:1.1rem;color:var(--blue-ink);padding:0 6px;line-height:1} /* bottom-left shipment name */ .stage-name{position:absolute;left:16px;bottom:24px;z-index:20;display:flex;gap:8px;align-items:center} .stage-name input{width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm); font-family:var(--display);font-weight:600;padding:12px 14px} .stage-name button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);cursor:pointer;font-size:1.1rem} /* bottom info bar */ .stage-info{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:15;display:flex; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;max-width:60vw} .stage-info .cell{padding:9px 16px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:1px;min-width:96px} .stage-info .cell:first-child{border-left:none} .stage-info .k{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600} .stage-info .val{font-family:var(--mono);font-weight:600;font-size:.9rem;color:var(--ink)} .stage-info .val.warn{color:var(--red)} /* bottom-right actions + circular Yükle */ .stage-actions{position:absolute;right:16px;bottom:24px;z-index:20;display:flex;align-items:center;gap:10px} .stage-actions .btn{box-shadow:var(--shadow)} .yukle{width:104px;height:104px;border-radius:50%;border:none;background:linear-gradient(135deg,#3f7bff,#2f6bff); color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem;cursor:pointer;box-shadow:0 10px 30px rgba(47,107,255,.4); transition:.15s;display:grid;place-items:center} .yukle:hover{transform:translateY(-2px) scale(1.03)} .yukle:disabled{opacity:.7;transform:none} /* ---- "Devam" rozeti ---- Ana yukleme dugmesinin sag ust kosesine oturur. Yan yana duran iki esit dugme yerine bu bicim, ikisi arasindaki iliskiyi anlatiyor: asil eylem YUKLEME, devam onun bir varyanti. Kullanicilar iki dugmeyi karistiriyordu. Yalnizca optimizasyondan SONRA ve yuk listesi degistiginde gorunur (bkz. editor.js syncContinue). */ .load-wrap{position:relative;display:inline-flex;flex:none} .continue-badge{position:absolute;top:-4px;right:-4px;z-index:2; width:46px;height:46px;border-radius:50%;border:3px solid #fff;padding:0; background:var(--teal,#12b5ab);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(18,181,171,.45);transition:.15s} .continue-badge:hover{transform:scale(1.08)} .continue-badge:disabled{opacity:.7;transform:none} .continue-badge svg{width:20px;height:20px} /* Gizleme genel `hidden` yardimcisiyla yapiliyor ve o `!important` tasiyor; burada display'i geri acan bir kural YAZILMAMALI. */ /* manual bar */ .stage-manual{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:21;display:flex;gap:8px;align-items:center; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px 12px;flex-wrap:wrap;max-width:80vw} @media(max-width:900px){ .stage-name input{width:150px} } /* axle definition cards (Spaces) */ .axle-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .axle-card{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--bg-2)} .axle-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:600; font-size:.85rem;margin-bottom:10px;color:var(--ink)} /* ============ Spaces page (cargoLoader-style) ============ */ .wide{max-width:1560px;margin:0 auto;padding:0 22px} .spaces-head{border-bottom:1px solid var(--line);background:var(--panel)} .spaces-head .inner{display:flex;align-items:center;justify-content:center;position:relative;height:56px} .spaces-head h1{font-size:1.4rem} .spaces-shell{display:grid;grid-template-columns:320px 1fr;gap:0;min-height:calc(100vh - 62px - 57px)} .space-list-wrap{border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;max-height:calc(100vh - 62px - 57px)} .space-list-wrap .search{padding:14px} .space-list{overflow-y:auto;padding:0 10px 14px} .space-li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer;transition:.12s} .space-li:hover{background:var(--bg-2)} .space-li.on{background:#eaf0ff} .space-li .ic{width:44px;height:44px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;font-size:1.3rem;flex:none} .space-li .mt{flex:1;min-width:0} .space-li .mt .n{font-family:var(--display);font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .space-li .mt .d{font-size:.76rem;color:var(--muted);font-family:var(--mono)} .space-li .bd{font-size:.68rem;color:var(--dim);text-align:right;line-height:1.3;flex:none} .spaces-main{padding:18px 22px 40px;overflow-x:hidden} .spaces-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px} .ekle-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;margin-bottom:18px} .ekle-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start} .diagram{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:230px;display:grid;place-items:center} .diagram svg{width:100%;height:auto;max-height:230px} .ekle-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px} .axle-add{border:1.5px dashed var(--line);border-radius:var(--r-sm);display:grid;place-items:center;min-height:150px;cursor:pointer;color:var(--teal-ink);background:var(--bg-2)} .axle-add:hover{background:#e9faf8;border-color:var(--teal)} .axle-add .plus{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:1.4rem} .pager{display:flex;justify-content:center;align-items:center;gap:4px;padding:14px;flex-wrap:wrap} .pager button{min-width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem;color:var(--ink-2);padding:0 8px} .pager button:hover:not(:disabled):not(.on){background:var(--bg-2)} .pager button.on{background:var(--blue);border-color:var(--blue);color:#fff} .pager button:disabled{opacity:.45;cursor:default} .pager-gap{min-width:20px;text-align:center;color:var(--dim);user-select:none} /* Manuel yerleştirme: durum rozeti ve sorun listesi */ /* Ana sayfa ekran görüntüsü vitrini */ .sec-head{text-align:center;max-width:660px;margin:0 auto 26px} .sec-head h2{font-size:1.9rem;margin:8px 0 8px;letter-spacing:-.02em} .sec-head p{font-size:1rem} .shots{max-width:1120px;margin:0 auto} .shot-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px} .shot-tab{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px; padding:8px 16px;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .15s} .shot-tab:hover{border-color:var(--blue);color:var(--blue)} .shot-tab.on{background:var(--blue);border-color:var(--blue);color:#fff} .shot-stage{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:#fff;box-shadow:0 18px 48px rgba(13,17,23,.10)} .shot-stage img{display:block;width:100%;height:auto;background:var(--bg-2)} .shot-stage figcaption{padding:14px 18px;font-size:.86rem;color:var(--muted); border-top:1px solid var(--line);text-align:center;background:#fff} @media(max-width:700px){ .sec-head h2{font-size:1.45rem} .shot-tab{padding:7px 12px;font-size:.78rem} } .jobbar{display:inline-block;width:90px;height:7px;border-radius:99px;background:var(--bg-2); overflow:hidden;vertical-align:middle;margin-right:8px;border:1px solid var(--line)} .jobbar i{display:block;height:100%;background:var(--blue);transition:width .4s ease} /* Yük listesi: sürükle-bırak öncelik sıralama */ .group-block{border-radius:var(--r-sm);transition:box-shadow .12s} .group-block.dragging{opacity:.6;box-shadow:0 6px 18px rgba(13,17,23,.16);background:#fff} .group-items{min-height:6px} .item-row.dragging{opacity:.6;box-shadow:0 4px 14px rgba(13,17,23,.14);background:#fff;border-radius:var(--r-sm)} .drag-handle{cursor:grab;color:var(--dim);font-size:.9rem;line-height:1;padding:2px 4px; touch-action:none;user-select:none;flex:none} .drag-handle:hover{color:var(--ink-2)} .drag-handle:active{cursor:grabbing} body.dnd-active{user-select:none;-webkit-user-select:none} .gord{width:18px;height:18px;border-radius:5px;background:var(--bg-2);display:grid;place-items:center; font-size:.68rem;font-weight:800;color:var(--muted);flex:none} /* ---- grup basligi: katlama, gruba ekleme, grup silme ---- Uzun bir sevkiyatta panel sonsuz kaydirmaya donuyordu; katlama onu cozer. Ekleme ve silme grup satirina alindi cunku tek bir "+Yük" dugmesi varken yeni yukun hangi gruba dustugu belirsizdi. */ .gtog{background:none;border:0;padding:2px;cursor:pointer;color:var(--muted); display:grid;place-items:center;flex:none;border-radius:5px} .gtog svg{width:15px;height:15px;transition:transform .15s ease} .gtog:hover{color:var(--ink-2);background:var(--bg-2)} /* Kapaliyken ok saga bakar — yon, icerigin gizli oldugunu tek basina anlatir. */ .group-block.collapsed .gtog svg{transform:rotate(-90deg)} .group-block.collapsed .group-items{display:none} .gname-edit{margin-left:auto;max-width:118px;padding:4px 8px;font-size:.76rem} .gbtn{background:none;border:0;padding:3px;cursor:pointer;color:var(--muted); display:grid;place-items:center;flex:none;border-radius:5px} .gbtn svg{width:17px;height:17px} .gbtn:hover{color:var(--blue-ink);background:var(--bg-2)} .gmenu-wrap{position:relative;display:grid;place-items:center;flex:none} .gmenu-wrap .gbtn:hover{color:var(--red)} .gmenu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:132px; background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:0 8px 22px rgba(13,17,23,.14);padding:4px;display:flex;flex-direction:column} .gmenu.hidden{display:none} .gmenu button{background:none;border:0;text-align:left;padding:7px 10px;cursor:pointer; font:inherit;font-size:.78rem;color:var(--ink-2);border-radius:5px;white-space:nowrap} .gmenu button:hover{background:var(--bg-2)} /* Grubu tumden silmek yuk silmekten daha yikici; renk bunu onceden soyler. */ .gmenu button[data-gdel]{color:var(--red)} /* ---- yuk formu ---- Panelin ustunde dururken (varsayilan konum) ince bir ayraçla ayrilir. */ .item-form{border-top:1px solid var(--line);margin-top:12px;padding-top:14px} /* Bir yuk duzenlenirken form kendi satirinin ALTINA tasinir. O zaman ust ayraç yerine bir KART olur: duzenlenen yukun hangisi oldugu, formun nerede bittigi ve listenin nerede devam ettigi tek bakista gorunsun. */ .item-form.inline{ border:1px solid var(--blue); border-top:1px solid var(--blue); border-radius:var(--r-sm); background:var(--bg-2); margin:2px 0 8px; padding:12px; box-shadow:0 4px 16px rgba(47,107,255,.10); } .overflow-opt{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2)} .overflow-opt .ol{display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} .overflow-opt select{width:100%} .overflow-opt .oh{font-size:.75rem;margin:8px 0 0;line-height:1.45} .space-list-head{display:flex;justify-content:space-between;align-items:center;margin-top:14px; font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .space-list{display:flex;flex-direction:column;gap:6px;margin-top:8px} .space-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line); border-radius:var(--r-sm);background:#fff;font-size:.82rem} .space-row.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(45,110,255,.12)} .space-row .ord{width:20px;height:20px;border-radius:6px;background:var(--bg-2);display:grid; place-items:center;font-size:.7rem;font-weight:800;color:var(--muted);flex:none} .space-row .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .space-row .dm{font-size:.72rem;color:var(--muted);white-space:nowrap} /* Set uyeligi: alan adinin yaninda kucuk bir bagliluk imi. Sol kenardaki mor serit, bir sette KAC alan oldugunu listeye bakar bakmaz gosterir. */ .space-row.in-set{border-left:3px solid #8a76d8} .space-row .row-set{flex:none;max-width:38%;font-style:normal;font-size:.68rem;font-weight:600;color:#4b3a91; background:#efeaff;border-radius:999px;padding:1px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Listede duran bir palet: etkin alan baska biri olsa da gorunur kalmali, yoksa yanlis kurulum listenin icinde saklanir. */ .space-row .row-warn{flex:none;font-style:normal;font-size:.72rem;color:#a9741a; background:#fdf2df;border-radius:999px;padding:1px 6px;line-height:1.4;cursor:help} .combo-item.is-set .ct .n{color:#4b3a91} .combo-item.is-set{border-left:3px solid #8a76d8;border-radius:8px} .space-row .x{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:2px 4px} .space-row .x:hover{color:var(--red)} .space-row .mv{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:.8rem;padding:0 2px} .space-row .mv:hover{color:var(--ink)} .space-row .mv:disabled{opacity:.3;cursor:default} .rot-group{display:inline-flex;gap:4px;align-items:center} .rot-group .btn{padding-left:8px;padding-right:8px} .man-axle{font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap; font-family:var(--mono,monospace);padding:0 4px} .man-axle.bad{color:var(--red)} .man-axle:empty{display:none} .man-status{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px; font-size:.78rem;font-weight:600;white-space:nowrap;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-2)} .man-status.ok{border-color:#bfe6d2;background:#f2fbf6;color:#177a4c;cursor:default} .man-status.warn{border-color:#f3d9a5;background:#fffaf0;color:#8a5b09} .man-status.bad{border-color:#f5bfc2;background:#fff5f5;color:#b4262b} .man-status b{font-weight:800} .prob-list{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:2px} .prob-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer} .prob-row:hover{background:var(--bg-2)} .prob-row .sw{width:14px;height:14px;border-radius:4px;flex:none;display:inline-block} .prob-row .nm{font-weight:600;font-size:.86rem} .prob-row .dm{font-size:.78rem;color:var(--red)} @media(max-width:1000px){ .spaces-shell{grid-template-columns:1fr} .space-list-wrap{max-height:none} .ekle-grid{grid-template-columns:1fr} .ekle-fields{grid-template-columns:1fr} } /* constraint icons */ .cst-ic{width:15px;height:15px;flex:none} .row-ic{width:14px;height:14px;vertical-align:middle;margin-right:2px} /* custom combo with icons (editor preset picker) */ .combo{position:relative} .combo-btn{width:100%;display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line); border-radius:var(--r-sm);padding:7px 11px;cursor:pointer;font-family:var(--font);font-size:.92rem;color:var(--ink);text-align:left} .combo-btn:hover{border-color:#c6d2e2} .combo-ic{width:30px;height:30px;flex:none;display:grid;place-items:center} .combo-ic svg,.combo-item .ci svg,.space-li .ic svg{display:block} .combo-caret{margin-left:auto;color:var(--muted);font-size:.7rem} .combo-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--line); border-radius:var(--r-sm);box-shadow:var(--shadow);max-height:340px;overflow-y:auto;padding:6px} .combo-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer} .combo-item:hover{background:var(--bg-2)} .combo-item.on{background:#eaf0ff} .combo-item .ci{width:34px;height:34px;flex:none;display:grid;place-items:center} .combo-item .ct{min-width:0} .combo-item .ct .n{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .combo-item .ct .d{font-size:.73rem;color:var(--muted);font-family:var(--mono)} /* ---- çoklu seçim listesi ---- Onay kutusu bilerek görünür bırakıldı: "tıklayınca seçilir" davranışını kullanıcının tahmin etmesi gerekmiyor, kutu zaten söylüyor. */ .combo-menu.multi{padding:0;max-height:none;overflow:visible} .mc-head{display:flex;gap:6px;align-items:center;padding:8px;border-bottom:1px solid var(--line)} .mc-search{flex:1;min-width:0;font-size:.82rem;padding:6px 9px} .mc-all{flex:none;border:1px solid var(--line);background:var(--bg-2);border-radius:7px; padding:6px 9px;font-size:.75rem;color:var(--ink-2);cursor:pointer;white-space:nowrap} .mc-all:hover{border-color:#c6d2e2;background:#fff} .mc-list{max-height:236px;overflow:auto;padding:6px} /* Satır bir