/* =========================================================================
   PAYLAŞ. — Design System
   Ücretsiz Eşya Paylaşım Platformu
   Tokens + reusable component classes (used together with Tailwind CDN
   utility classes for layout). Keep this file the single source of truth
   for color, spacing, radius, shadow and component look & feel.
   ========================================================================= */

:root{
  /* ---- Brand colors ---- */
  --color-primary-50:#eefbf3;
  --color-primary-100:#d5f5e1;
  --color-primary-200:#aeeac7;
  --color-primary-300:#78d9a8;
  --color-primary-400:#43c186;
  --color-primary-500:#219d68;
  --color-primary-600:#157f54;
  --color-primary-700:#136545;
  --color-primary-800:#124f39;
  --color-primary-900:#0f4130;

  /* ---- Accent (CTA / give-away action) ---- */
  --color-accent-50:#fff3ee;
  --color-accent-100:#ffe3d6;
  --color-accent-300:#ffab8a;
  --color-accent-400:#ff8259;
  --color-accent-500:#f96435;
  --color-accent-600:#e34f22;
  --color-accent-700:#bd3d18;

  /* ---- Neutrals ---- */
  --color-ink-900:#14181a;
  --color-ink-800:#20262a;
  --color-ink-700:#333c41;
  --color-ink-600:#4b565c;
  --color-ink-500:#67737a;
  --color-ink-400:#8b969b;
  --color-ink-300:#b4bcc0;
  --color-ink-200:#d8dee0;
  --color-ink-100:#eceff0;
  --color-ink-50:#f6f8f8;
  --color-white:#ffffff;

  /* ---- Semantic states ---- */
  --color-success:#1a9c5b;
  --color-success-bg:#e7f8ee;
  --color-warning:#c9821a;
  --color-warning-bg:#fdf3e2;
  --color-danger:#d43d3d;
  --color-danger-bg:#fdeaea;
  --color-info:#2563eb;
  --color-info-bg:#eaf1fe;
  --color-neutral-bg:#eef1f2;

  /* ---- Elevation ---- */
  --shadow-xs:0 1px 2px rgba(20,24,26,0.05);
  --shadow-sm:0 2px 8px rgba(20,24,26,0.06);
  --shadow-md:0 6px 20px rgba(20,24,26,0.08);
  --shadow-lg:0 16px 40px rgba(20,24,26,0.14);
  --shadow-focus:0 0 0 3px rgba(21,127,84,0.25);

  /* ---- Radius ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-full:999px;

  /* ---- Spacing scale (extends tailwind, used in custom css) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;

  --font-heading:'Outfit', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;}
svg{width:20px;height:20px;flex-shrink:0;display:inline-block;vertical-align:middle;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--color-ink-800);
  background:var(--color-ink-50);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.font-heading{font-family:var(--font-heading);letter-spacing:-0.01em;}
a{color:inherit;}
button{font-family:inherit;}
.container-app{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;}
@media(min-width:768px){.container-app{padding-left:24px;padding-right:24px;}}
@media(min-width:1440px){.container-app{padding-left:32px;padding-right:32px;}}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm);
}
::selection{background:var(--color-primary-200);}

/* Scrollbar (subtle) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--color-ink-200);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* =============================== BUTTONS =============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14.5px;line-height:1;padding:12px 20px;
  border-radius:var(--radius-full);border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-lg{padding:14px 26px;font-size:16px;}
.btn-block{width:100%;}

.btn-primary{background:var(--color-accent-500);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--color-accent-600);}
.btn-secondary{background:var(--color-primary-700);color:#fff;}
.btn-secondary:hover{background:var(--color-primary-800);}
.btn-outline{background:#fff;color:var(--color-ink-800);border-color:var(--color-ink-200);}
.btn-outline:hover{border-color:var(--color-ink-400);background:var(--color-ink-50);}
.btn-ghost{background:transparent;color:var(--color-ink-700);}
.btn-ghost:hover{background:var(--color-ink-100);}
.btn-danger{background:var(--color-danger);color:#fff;}
.btn-danger:hover{background:#b52f2f;}
.btn-success{background:var(--color-success);color:#fff;}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full);}
.btn-icon.btn-sm{width:34px;height:34px;}

/* ================================ INPUTS ================================ */
.field-label{display:block;font-size:13px;font-weight:600;color:var(--color-ink-700);margin-bottom:6px;}
.field-hint{font-size:12.5px;color:var(--color-ink-500);margin-top:6px;}
.field-error{font-size:12.5px;color:var(--color-danger);margin-top:6px;display:flex;align-items:center;gap:4px;}
.input,.select,.textarea{
  width:100%;background:#fff;border:1.5px solid var(--color-ink-200);border-radius:var(--radius-md);
  padding:11px 14px;font-size:14.5px;color:var(--color-ink-800);transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--color-ink-400);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--color-primary-500);box-shadow:var(--shadow-focus);outline:none;}
.input.has-error,.textarea.has-error{border-color:var(--color-danger);}
.input-icon-wrap{position:relative;}
.input-icon-wrap .input{padding-left:40px;}
.input-icon-wrap svg,.input-icon-wrap i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--color-ink-400);width:18px;height:18px;}
.textarea{resize:vertical;min-height:96px;}
.checkbox-row,.radio-row{display:flex;align-items:flex-start;gap:10px;}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.switch .track{position:absolute;inset:0;background:var(--color-ink-200);border-radius:999px;transition:.2s;}
.switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-xs);}
.switch input:checked + .track{background:var(--color-primary-500);}
.switch input:checked + .track .thumb{transform:translateX(18px);}

/* =============================== DROPDOWN/SELECT =============================== */
.select-wrap{position:relative;}
.select-wrap select{appearance:none;padding-right:36px;}
.select-wrap::after{
  content:"";position:absolute;right:14px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--color-ink-500);border-bottom:2px solid var(--color-ink-500);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}

/* ================================ CHIPS ================================ */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-full);
  font-size:13.5px;font-weight:600;background:#fff;border:1.5px solid var(--color-ink-200);color:var(--color-ink-700);
  cursor:pointer;transition:all .15s ease;white-space:nowrap;
}
.chip:hover{border-color:var(--color-ink-400);}
.chip.active{background:var(--color-primary-700);border-color:var(--color-primary-700);color:#fff;}
.chip-cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:var(--radius-lg);
  background:#fff;border:1.5px solid var(--color-ink-100);min-width:84px;transition:all .15s ease;cursor:pointer;}
.chip-cat:hover{border-color:var(--color-primary-300);background:var(--color-primary-50);transform:translateY(-2px);}
.chip-cat .chip-cat-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-primary-50);display:flex;align-items:center;justify-content:center;color:var(--color-primary-700);}
.chip-cat span{font-size:12.5px;font-weight:600;color:var(--color-ink-700);text-align:center;}

/* ================================ BADGES ================================ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--radius-full);line-height:1;letter-spacing:.01em;}
.badge-free{background:var(--color-primary-50);color:var(--color-primary-700);}
.badge-available{background:var(--color-success-bg);color:var(--color-success);}
.badge-reserved{background:var(--color-warning-bg);color:var(--color-warning);}
.badge-completed{background:var(--color-info-bg);color:var(--color-info);}
.badge-expired{background:var(--color-neutral-bg);color:var(--color-ink-500);}
.badge-review{background:#f3eafe;color:#7c3aed;}
.badge-verified{background:var(--color-info-bg);color:var(--color-info);}
.badge-supporter{background:#fff3ee;color:var(--color-accent-600);}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* Trust line */
.trust-line{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--color-ink-500);}
.trust-line svg{width:14px;height:14px;}
.trust-line.verified{color:var(--color-info);}
.rating-pill{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--color-ink-800);}
.rating-pill svg{width:13px;height:13px;color:#f5a623;fill:#f5a623;}

/* ================================ CARDS ================================ */
.card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-ink-100);box-shadow:var(--shadow-sm);}
.card-pad{padding:20px;}
.item-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-ink-100);
  box-shadow:var(--shadow-sm);transition:box-shadow .18s ease, transform .18s ease;display:flex;flex-direction:column;height:100%;
}
.item-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.item-card .thumb-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-ink-100);}
.item-card .thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.item-card:hover .thumb-wrap img{transform:scale(1.045);}
.fav-btn{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);border:none;cursor:pointer;color:var(--color-ink-600);
  transition:transform .12s ease, color .15s ease;
}
.fav-btn:hover{transform:scale(1.08);}
.fav-btn svg{width:17px;height:17px;}
.fav-btn.is-fav{color:var(--color-accent-500);}
.fav-btn.is-fav svg{fill:var(--color-accent-500);}
.thumb-badge-row{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;}

/* ================================ MODALS ================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,20,22,.5);display:flex;align-items:flex-end;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
@media(min-width:768px){.modal-overlay{align-items:center;}}
.modal-panel{
  background:#fff;width:100%;max-width:520px;border-radius:24px 24px 0 0;max-height:92vh;overflow-y:auto;
  transform:translateY(24px);transition:transform .22s ease;box-shadow:var(--shadow-lg);
}
.modal-overlay.open .modal-panel{transform:translateY(0);}
@media(min-width:768px){.modal-panel{border-radius:24px;}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 4px;}
.modal-body{padding:16px 20px 20px;}
.modal-drag-handle{width:40px;height:4px;background:var(--color-ink-200);border-radius:99px;margin:10px auto 0;}
@media(min-width:768px){.modal-drag-handle{display:none;}}

/* Bottom sheet (mobile filters) reuses modal classes with align-items flex-end */

/* ================================ TOASTS ================================ */
#toast-root{position:fixed;bottom:88px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:200;pointer-events:none;padding:0 16px;}
@media(min-width:768px){#toast-root{bottom:24px;}}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--color-ink-900);color:#fff;
  padding:13px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:600;
  max-width:420px;transform:translateY(12px);opacity:0;transition:all .25s ease;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{background:var(--color-primary-800);}
.toast.error{background:#7a2323;}
.toast svg{width:16px;height:16px;flex:none;}

/* ================================ ALERTS ================================ */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-md);font-size:13.5px;line-height:1.5;border:1px solid transparent;}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px;}
.alert-info{background:var(--color-info-bg);color:#1d4ed8;border-color:#c9dcfb;}
.alert-success{background:var(--color-success-bg);color:var(--color-success);border-color:#bfe9d1;}
.alert-warning{background:var(--color-warning-bg);color:var(--color-warning);border-color:#f3dfb2;}
.alert-danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:#f5cccc;}

/* ================================ TABS ================================ */
.tabs-row{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--color-ink-100);scrollbar-width:none;}
.tabs-row::-webkit-scrollbar{display:none;}
.tab-btn{
  padding:12px 16px;font-size:14px;font-weight:600;color:var(--color-ink-500);border-bottom:2.5px solid transparent;
  white-space:nowrap;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;
  display:flex;align-items:center;gap:6px;
}
.tab-btn.active{color:var(--color-primary-700);border-color:var(--color-primary-700);}
.tab-btn .count{background:var(--color-ink-100);color:var(--color-ink-600);font-size:11px;padding:1px 7px;border-radius:99px;font-weight:700;}
.tab-btn.active .count{background:var(--color-primary-100);color:var(--color-primary-700);}

/* Segmented pill tabs (used for map/list toggle etc) */
.segmented{display:inline-flex;background:var(--color-ink-100);padding:4px;border-radius:var(--radius-full);gap:2px;}
.segmented button{padding:8px 16px;font-size:13.5px;font-weight:600;border-radius:var(--radius-full);color:var(--color-ink-600);border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:6px;}
.segmented button.active{background:#fff;color:var(--color-ink-900);box-shadow:var(--shadow-xs);}

/* ================================ ACCORDION ================================ */
.accordion-item{border-bottom:1px solid var(--color-ink-100);}
.accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 4px;background:none;border:none;cursor:pointer;text-align:left;font-weight:600;font-size:14.5px;color:var(--color-ink-800);}
.accordion-trigger svg{width:18px;height:18px;color:var(--color-ink-500);transition:transform .2s ease;flex:none;}
.accordion-item.open .accordion-trigger svg{transform:rotate(180deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.accordion-item.open .accordion-panel{max-height:600px;}
.accordion-panel-inner{padding:0 4px 16px;font-size:13.5px;color:var(--color-ink-600);line-height:1.65;}

/* ================================ SKELETONS ================================ */
.skeleton{background:linear-gradient(90deg,var(--color-ink-100) 25%,var(--color-ink-200) 37%,var(--color-ink-100) 63%);
  background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-md);}
@keyframes skeleton-loading{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skeleton-card{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--color-ink-100);}
.skeleton-thumb{aspect-ratio:4/3;}

/* ================================ PAGINATION ================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;}
.page-btn{min-width:38px;height:38px;padding:0 8px;border-radius:var(--radius-md);border:1px solid var(--color-ink-200);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--color-ink-600);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.page-btn.active{background:var(--color-primary-700);border-color:var(--color-primary-700);color:#fff;}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ================================ NAVIGATION ================================ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-ink-100);}
.nav-link{font-size:14.5px;font-weight:600;color:var(--color-ink-600);padding:8px 4px;border-bottom:2px solid transparent;transition:color .15s;}
.nav-link:hover,.nav-link.active{color:var(--color-primary-700);}
.logo-mark{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:800;font-size:19px;color:var(--color-ink-900);}
.logo-mark .logo-badge{width:34px;height:34px;border-radius:10px;background:var(--color-primary-700);display:flex;align-items:center;justify-content:center;color:#fff;}

/* Bottom nav (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid var(--color-ink-100);
  display:flex;align-items:center;justify-content:space-between;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(20,24,26,.05);}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--color-ink-500);font-size:11px;font-weight:600;text-decoration:none;position:relative;}
.bn-item svg{width:22px;height:22px;}
.bn-item.active{color:var(--color-primary-700);}
.bn-item .bn-dot{position:absolute;top:2px;right:22%;width:7px;height:7px;border-radius:50%;background:var(--color-accent-500);border:1.5px solid #fff;}
.bn-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--color-accent-500);color:#fff;margin-top:-22px;box-shadow:var(--shadow-md);border:4px solid #fff;}
.bn-cta svg{width:24px;height:24px;}

@media(min-width:768px){.bottom-nav,.mobile-only{display:none !important;}}
@media(max-width:767px){.desktop-only{display:none !important;}}

/* Empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 20px;gap:14px;}
.empty-state .icon-wrap{width:76px;height:76px;border-radius:50%;background:var(--color-primary-50);display:flex;align-items:center;justify-content:center;color:var(--color-primary-600);}
.empty-state .icon-wrap svg{width:34px;height:34px;}

/* Utility */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.avatar{border-radius:50%;object-fit:cover;flex:none;background:var(--color-ink-100);}
.divider{height:1px;background:var(--color-ink-100);border:none;}
.sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--color-ink-100);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;z-index:55;box-shadow:0 -6px 20px rgba(20,24,26,.06);}
.progress-bar{height:6px;background:var(--color-ink-100);border-radius:99px;overflow:hidden;}
.progress-bar > div{height:100%;background:var(--color-primary-600);border-radius:99px;transition:width .3s ease;}
.step-dot{width:28px;height:28px;border-radius:50%;background:var(--color-ink-100);color:var(--color-ink-500);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none;}
.step-dot.done{background:var(--color-primary-600);color:#fff;}
.step-dot.active{background:var(--color-accent-500);color:#fff;}