/* Kadrel — bilgisayar ekranı yerleşimi (kadrel.app/studio). Telefonda hiçbir kural çalışmaz: hepsi 1024 px ve üstü.
   Canva çizgisi: solda dar menü şeridi (Oluştur + 5 sekme), ana sayfada yumuşak geçişli büyük başlık + arama + yuvarlak
   kategori simgeleri; düzenleyicide solda araç şeridi + açık panel, ortada kart, altta sayfalar. Alt pencereler ortada açılır.
   Renk ve köşe değerleri app.css'teki değişkenlerden. */
@media (min-width: 1024px) {
  :root { --rail: 84px; --side: 40px; }
  html, body { font-size: 15px; }
  #app { background: #fff; }
  ::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(16,19,28,.14); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(16,19,28,.26); }
  ::-webkit-scrollbar-track { background: transparent; }
  .row::-webkit-scrollbar, .chips::-webkit-scrollbar, .slides::-webkit-scrollbar, .dock::-webkit-scrollbar, .add-bar::-webkit-scrollbar { display: none; }

  /* ------------------------------------------------ sol menü şeridi */
  .tabbar {
    left: 0; top: 0; bottom: 0; right: auto; width: var(--rail); flex-direction: column; align-items: stretch; gap: 2px;
    padding: 108px 8px 16px; border-top: 0; border-right: 1px solid var(--line); background: #fbfbfd; backdrop-filter: none;
  }
  .tabbar button { flex: none; height: 66px; border-radius: 12px; gap: 5px; font-size: 11.5px; }
  .tabbar svg { font-size: 23px; }
  .tabbar button span { white-space: normal; text-align: center; line-height: 1.15; }
  .tabbar button.on { background: var(--brand-soft); }
  .fab {
    position: absolute; left: calc((var(--rail) - 44px) / 2); top: 18px; right: auto; bottom: auto !important;
    width: 44px; height: 44px; font-size: 22px; box-shadow: 0 4px 12px rgba(35,52,154,.3);
  }
  .fab-l { display: block; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }

  #home, .tab-screen { left: var(--rail); padding-bottom: 48px; }

  /* ------------------------------------------------ ana sayfa: üst alan */
  .h-hero {
    margin: 12px 12px 0; padding: 0 0 34px; border-radius: 22px; position: relative;
    background:
      radial-gradient(120% 140% at 0% 0%, #b9e6f0 0%, rgba(185,230,240,0) 46%),
      radial-gradient(90% 120% at 100% 0%, #e6d4fb 0%, rgba(230,212,251,0) 55%),
      linear-gradient(180deg, #dfe4ff 0%, #ece6ff 55%, #f6f0ff 100%);
  }
  .h-hero .h-top { padding: 18px 22px 0; }
  .h-hero .wordmark { height: 34px; }
  .h-title {
    display: block; margin: 6px auto 0; padding: 0 24px; text-align: center; font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -1.2px;
    font-family: "Bricolage Grotesque", var(--sans);
    background: linear-gradient(95deg, #23349a 0%, #4b3fd1 45%, #7d4fd8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .h-hero .search { max-width: 760px; height: 58px; margin: 26px auto 0; padding: 0 20px; border-radius: 16px; gap: 12px; }
  .h-hero .search input { font-size: 16px; }
  .h-hero .search svg { font-size: 21px; color: var(--text2); }

  /* yuvarlak kategori simgeleri */
  .desk-cats {
    display: flex; justify-content: safe center; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 24px 24px 0; margin-top: -2px;
  }
  .dc { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 6px 0; border-radius: 14px; color: var(--text); }
  .dc-i {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 26px;
    background: var(--b); background-image: linear-gradient(160deg, var(--a) 0%, var(--b) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(16,19,28,.12); transition: transform .15s;
  }
  .dc-l { font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center; }
  .dc.on .dc-i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand), 0 3px 8px rgba(16,19,28,.12); }
  .dc.on .dc-l { font-weight: 700; color: var(--brand); }
  .dc-more .dc-i { background: #fff; background-image: none; color: var(--text2); box-shadow: inset 0 0 0 1px var(--line2); }
  .dc:hover .dc-i { transform: translateY(-2px); }
  #cat-chips { display: none; }

  /* ------------------------------------------------ içerik genişliği */
  #feed, #designs-body, #tpl-feed, #kesfet-body { max-width: 1480px; margin: 0 auto; }
  #feed { padding-top: 8px; }
  .sec-head { padding: 0 var(--side) 14px; }
  .sec-head h2 { font-size: 22px; letter-spacing: -.3px; }
  .sec-head .more { font-size: 14px; }
  .sec { margin-top: 36px; }
  .hero { margin-top: 30px; }
  .row { gap: 18px; padding: 0 var(--side) 6px; scroll-padding: var(--side); scroll-snap-type: none; }
  .hcard { width: 250px; max-width: none; }
  .tcard { width: 178px; max-width: none; }
  .grid2 { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 18px; padding: 0 var(--side); }
  .cat-head { padding: 30px var(--side) 16px; }
  .cat-head h2 { font-size: 26px; }
  .nudge { width: calc(100% - 2 * var(--side)) !important; margin-left: var(--side) !important; margin-right: var(--side) !important; }
  .com-seg, .com-top { padding-left: var(--side); padding-right: var(--side); }
  .com-seg .seg, .com-top select { max-width: 720px; }
  .sec-note { margin-left: var(--side); margin-right: var(--side); }
  .fy-cta { width: calc(100% - 2 * var(--side)); margin: 28px var(--side) 0; padding: 18px 20px; }
  .qa { grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 0 var(--side); }
  .qa-b { padding: 16px; }
  .qa-b:hover { background: var(--fill2); }
  .empty-q { padding-left: var(--side); padding-right: var(--side); }

  /* sıra okları (app.js deskRow) */
  .rw { position: relative; }
  .rw-nav {
    position: absolute; top: calc(50% - 30px); z-index: 4; width: 44px; height: 44px; border-radius: 50%; place-items: center;
    background: #fff; color: var(--text); font-size: 20px; box-shadow: 0 2px 4px rgba(16,19,28,.08), 0 6px 18px rgba(16,19,28,.16);
    opacity: 0; transition: opacity .15s, transform .15s;
  }
  .rw > .rw-nav:not([hidden]) { display: grid; }
  .rw-nav.l { left: calc(var(--side) - 22px); }
  .rw-nav.l svg { transform: rotate(180deg); }
  .rw-nav.r { right: calc(var(--side) - 22px); }
  .rw:hover .rw-nav { opacity: 1; }
  .rw-nav:hover { transform: scale(1.06); }

  /* kartların üstüne gelince hafif kalkış */
  .hcard .th, .tcard .th { transition: transform .18s, box-shadow .18s; }
  .hcard:hover .th, .tcard:hover .th { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,19,28,.08), 0 12px 28px rgba(16,19,28,.16); }
  .hcard:active, .tcard:active { transform: none; }

  /* ------------------------------------------------ sekmeler */
  .tab-head { max-width: 1480px; margin: 0 auto; padding: 34px var(--side) 8px; }
  .tab-head h1 { font-size: 32px; letter-spacing: -.6px; }
  .tpl-search { max-width: 760px; margin: 34px auto 0 !important; height: 54px; border-radius: 14px; }
  .hist-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 18px; padding: 0 var(--side); }
  #more-body { max-width: 760px; margin: 0 auto; padding: 18px 24px 0; }
  #more .tab-head { max-width: 760px; padding-left: 24px; padding-right: 24px; }
  #designs-body > .sec-head, #designs-body > h3 { padding-left: var(--side); }

  /* yan menü (sağdan) masaüstünde de aynı, biraz daha geniş */
  .dr-pn { width: 380px !important; }

  /* ------------------------------------------------ alt pencereler: ekranın ortasında */
  .sheet-wrap.on { display: flex; align-items: center; justify-content: center; padding: 32px; }
  .sheet {
    position: relative; left: auto; right: auto; bottom: auto; width: min(640px, 100%); max-height: calc(100vh - 64px);
    padding: 26px 26px 26px; border-radius: 18px; box-shadow: 0 24px 60px rgba(16,19,28,.28); animation: deskpop .22s cubic-bezier(.2,.8,.2,1);
  }
  .sheet .grip { display: none; }
  .sheet .grid2 { padding: 0; }
  .sheet .bl-grid { grid-template-columns: repeat(5, 1fr); gap: 20px 12px; }
  .sheet .bl-items { grid-template-columns: repeat(5, 1fr); }
  .sheet .bl-photos { grid-template-columns: repeat(4, 1fr); }
  .bl-tile:hover .bl-front { transform: translateY(-2px); }
  @keyframes deskpop { from { transform: translateY(14px) scale(.98); opacity: 0; } }

  /* ------------------------------------------------ düzenleyici */
  #editor.on {
    display: grid; grid-template-columns: 84px auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .ed-top { grid-column: 1 / -1; grid-row: 1; padding: 10px 16px; }
  .ed-title { max-width: 40vw; }
  .ed-acts { gap: 8px; }
  .save { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14.5px; }
  .dock {
    grid-column: 1; grid-row: 2 / 4; flex-direction: column; justify-content: flex-start; gap: 2px; overflow-x: hidden; overflow-y: auto;
    padding: 10px 8px; border-top: 0; border-right: 1px solid var(--line); background: #fbfbfd;
  }
  .dock button { flex: none !important; width: 100%; height: 66px; min-width: 0; padding: 0 2px !important; border-radius: 12px; gap: 5px; font-size: 11.5px !important; }
  .dock button svg { font-size: 23px !important; }
  .dock button.on { background: var(--brand-soft); }
  .dock button.on::before { display: none; }
  .tool {
    grid-column: 2; grid-row: 2 / 4; height: auto !important; width: 0; border-radius: 0; box-shadow: none;
    transition: width .24s cubic-bezier(.2,.8,.2,1); border-right: 1px solid var(--line); background: #fff;
  }
  .tool.open { width: 380px; }
  .tool > .tool-head, .tool > .tool-body { width: 380px; }
  .tool-head { padding: 18px 14px 10px 20px; }
  .tool-head b { font-size: 18px; }
  .tool-head .ibtn svg { transform: rotate(90deg); }
  .tool-body { height: calc(100% - 62px); padding: 4px 20px 28px; }
  .tpl-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .stage { grid-column: 3; grid-row: 2; padding: 112px 28px 14px !important; }
  .strip { grid-column: 3; grid-row: 3; justify-content: center; padding: 6px 24px 16px; background: var(--bg2) !important; }
  #editor.on { background: var(--bg2); }
  .slide { width: 46px; }
  .strip-add { width: 46px; height: 57px; }
  .tb-pop { top: 56px; }

  /* fareyle üstüne gelince */
  .ibtn:hover, .sbtn:hover, .tabbar button:not(.on):hover, .dock button:not(.on):hover { background: var(--fill); }
  .save:hover { background: var(--brand2); }
  .add-bar button:hover { background: var(--fill); }
  .add-bar .bl-add:hover { background: var(--brand2); }
  .part-menu button:hover { background: rgba(255,255,255,.12); }
}

/* geniş ekran: biraz daha ferah */
@media (min-width: 1440px) {
  :root { --side: 48px; }
  .hcard { width: 270px; }
  .tcard { width: 190px; }
  .tool.open, .tool > .tool-head, .tool > .tool-body { width: 400px; }
}

/* görsel sürüklenirken sahne vurgusu */
@media (min-width: 1024px) {
  .stage.drop::after { content: "Görseli bırak, karta eklensin"; position: absolute; inset: 12px; z-index: 8; display: grid; place-items: center; border: 2px dashed var(--brand); border-radius: 16px; background: rgba(238,241,251,.82); color: var(--brand); font-weight: 700; font-size: 17px; pointer-events: none; }
}

/* sol alt köşe: hesap (Canva gibi) + açılır hesap menüsü; girişli iken üstteki yuvarlak gizli (aynısı solda) */
@media (min-width: 1024px) {
  .tabbar .rail-me:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: auto; height: auto !important; min-height: 66px; padding: 10px 0;
    border-radius: 12px; color: var(--brand); font-size: 11.5px; font-weight: 700;
  }
  .rail-me svg { font-size: 27px; }
  .rail-me.in { color: var(--text2); font-weight: 500; }
  .rail-me .me-av { width: 40px; height: 40px; font-size: 16px; }
  .rail-me:hover { background: var(--fill); }
  html.web .h-me.in { display: none !important; }
  .me-pop:not([hidden]) {
    display: block; position: absolute; left: calc(var(--rail) + 10px); bottom: 14px; z-index: 48; width: 312px; padding: 10px;
    border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(16,19,28,.06), 0 18px 48px rgba(16,19,28,.22); animation: deskpop .18s cubic-bezier(.2,.8,.2,1);
  }
  .mp-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; }
  .mp-head .mt b { font-size: 15.5px; }
  .mp-head .mt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mp-pro { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 600; text-align: left; }
  .mp-pro svg { color: var(--gold); font-size: 17px; }
  .mp-pro span { flex: 1; }
  .mp-pro em { font-style: normal; font-weight: 700; font-size: 12.5px; padding: 4px 9px; border-radius: 7px; background: var(--brand); color: #fff; }
  .mp-pro:hover { background: #e3e8fa; }
  .mp-bdg { padding: 10px 10px 0; }
  .mp-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
  .mp-row { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 10px; border-radius: 9px; font-size: 14.5px; color: var(--text); text-align: left; }
  .mp-row svg { font-size: 19px; color: var(--text2); }
  .mp-row:hover { background: var(--fill); }
  .mp-row.out, .mp-row.out svg { color: var(--danger); }
}