:root{
    --pine:#1E2A22;
    --pine-2:#263528;
    --paper:#EFE3C8;
    --paper-2:#F7EFDD;
    --brass:#C89B3C;
    --brass-2:#E3B65C;
    --rust:#B23A2E;
    --sage:#5C7A5A;
    --ink:#20291F;
    --line: rgba(239,227,200,0.18);
    --shadow: 0 20px 50px rgba(0,0,0,0.35);
    --radius: 22px;
    --display: 'Fraunces', ui-serif, Georgia, serif;
    --stamp: 'Special Elite', 'Courier New', monospace;
    --body: 'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--pine);color:var(--paper-2);font-family:var(--body);}
  body{overflow-x:hidden;}
  a{color:inherit;}
  button{font-family:var(--body);}
  ::selection{background:var(--brass); color:var(--pine);}

  .hidden{display:none !important;}

  /* ---------- layout shells ---------- */
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  .grain{
    position:fixed; inset:0; pointer-events:none; opacity:0.05; z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- nav ---------- */
  .nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:rgba(30,42,34,0.72); border-bottom:1px solid var(--line);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1120px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:0.2px;}
  .brand svg{width:26px; height:26px;}
  .nav-right{display:flex; align-items:center; gap:8px;}
  .nav-text-link{background:none; border:none; color:var(--paper-2); opacity:0.85; font-weight:600; font-size:14px; padding:10px 14px; cursor:pointer;}
  .nav-text-link:hover{opacity:1; color:var(--brass-2);}
  .nav-cta{background:var(--brass); color:var(--pine); border:none; padding:10px 18px; border-radius:100px; font-weight:600; font-size:14px; cursor:pointer; transition:transform .15s ease, background .15s ease;}
  .nav-cta:hover{background:var(--brass-2); transform:translateY(-1px);}

  /* ---------- hero ---------- */
  .hero{position:relative; padding:86px 0 60px; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;}
  .eyebrow{font-family:var(--stamp); text-transform:uppercase; letter-spacing:0.16em; font-size:12px; color:var(--brass-2); display:flex; align-items:center; gap:10px; margin-bottom:18px;}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass-2);}
  h1.hero-title{font-family:var(--display); font-weight:900; font-size:clamp(38px,5.2vw,64px); line-height:1.04; margin:0 0 20px; letter-spacing:-0.5px;}
  h1.hero-title em{font-style:normal; color:var(--brass-2);}
  .hero-sub{font-size:17px; line-height:1.65; color:rgba(247,239,221,0.78); max-width:480px; margin:0 0 30px;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{background:var(--brass); color:var(--pine); border:none; padding:15px 26px; border-radius:100px; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 10px 30px rgba(200,155,60,0.25); transition:transform .15s ease;}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:transparent; color:var(--paper-2); border:1px solid var(--line); padding:15px 24px; border-radius:100px; font-weight:600; font-size:15px; cursor:pointer;}
  .btn-ghost:hover{border-color:var(--brass-2); color:var(--brass-2);}

  /* tag illustration */
  .tag-scene{position:relative; display:flex; justify-content:center; align-items:center; min-height:390px;}
  .tag-scene svg{filter:drop-shadow(0 25px 40px rgba(0,0,0,0.4));}
  @keyframes swing{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);}}
  .swing-group{transform-origin:150px 46px; animation:swing 4.5s ease-in-out infinite;}

  /* ---------- flow steps ---------- */
  .steps{padding:50px 0 20px;}
  .steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .step-card{background:var(--pine-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
  .step-num{font-family:var(--stamp); color:var(--brass-2); font-size:13px; margin-bottom:10px; display:block;}
  .step-card h3{font-family:var(--display); font-size:20px; margin:0 0 8px;}
  .step-card p{margin:0; font-size:14.5px; color:rgba(247,239,221,0.7); line-height:1.55;}

  /* ---------- mağaza (3D Honey Toy's) ---------- */
  #magaza{padding:70px 0;}
  .shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto;}
  @media(max-width:980px){.shop-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.shop-grid{grid-template-columns:1fr;}}
  .shop-card{background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative;}
  .shop-card-featured{border:2px solid var(--brass);}
  .shop-ribbon{position:absolute; top:12px; left:12px; z-index:2; background:var(--brass); color:var(--pine); font-family:var(--stamp); font-size:10.5px; font-weight:700; letter-spacing:0.3px; padding:5px 10px; border-radius:100px;}
  .shop-card img{width:100%; height:190px; object-fit:cover; display:block; background:var(--paper-2);}
  .shop-info{padding:18px 18px 20px; color:var(--ink);}
  .shop-info h4{font-family:var(--display); font-size:16.5px; margin:0 0 6px;}
  .shop-price{font-family:var(--stamp); font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 10px; opacity:0.8;}
  .shop-stock-out{font-size:12px; font-weight:700; color:var(--rust); margin:0 0 12px;}
  .shop-btn{display:block; text-align:center; background:var(--ink); color:var(--paper-2); text-decoration:none; padding:11px; border-radius:12px; font-weight:700; font-size:13px; transition:background .15s ease;}
  .shop-btn:hover{background:#000;}
  .shop-btn-outline{background:transparent; border:1.5px solid var(--rust); color:var(--rust);}
  .shop-btn-outline:hover{background:var(--rust); color:#fff;}
  .shop-footer{display:flex; justify-content:center; align-items:center; gap:16px; margin-top:36px; flex-wrap:wrap;}
  .shop-insta{display:inline-flex; align-items:center; gap:7px; color:var(--paper-2); text-decoration:none; font-weight:600; font-size:14px; background:var(--pine-2); border:1px solid var(--line); padding:11px 20px; border-radius:100px;}
  .shop-insta:hover{border-color:var(--brass-2); color:var(--brass-2);}

  /* ---------- builder section ---------- */
  .builder{padding:90px 0 110px;}
  .section-head{max-width:600px; margin:0 auto 44px; text-align:center;}
  .section-head .eyebrow{justify-content:center;}
  .section-head h2{font-family:var(--display); font-size:clamp(28px,3.6vw,38px); margin:0 0 12px;}
  .section-head p{color:rgba(247,239,221,0.7); font-size:15.5px; margin:0;}

  .builder-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;}
  @media(max-width:880px){.builder-grid{grid-template-columns:1fr;} .hero-grid{grid-template-columns:1fr;} .tag-scene{order:-1;} .steps-row{grid-template-columns:1fr;}}

  .card{background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); position:relative;}
  .card h3{font-family:var(--display); font-size:22px; margin:0 0 6px;}
  .card .muted{color:rgba(32,41,31,0.6); font-size:13.5px; margin:0 0 22px;}

  label{display:block; font-size:13px; font-weight:600; margin:0 0 6px; color:rgba(32,41,31,0.75);}
  .field{margin-bottom:18px;}
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password]{
    width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid rgba(32,41,31,0.15); background:var(--paper-2); font-size:15px; color:var(--ink); font-family:var(--body);
  }
  input[type=password]{
    padding:16px 16px; font-size:17px; letter-spacing:2px;
  }
  input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(200,155,60,0.2);}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

  .chip-input-row{display:flex; gap:8px; margin-bottom:10px;}
  .chip-input-row input{flex:1;}
  .chip-add{background:var(--sage); color:#fff; border:none; border-radius:12px; padding:0 18px; font-weight:600; cursor:pointer; font-size:14px;}
  .quick-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
  .quick-chip{background:transparent; border:1.5px dashed rgba(32,41,31,0.25); color:rgba(32,41,31,0.65); border-radius:100px; padding:6px 12px; font-size:12.5px; cursor:pointer;}
  .quick-chip:hover{border-color:var(--rust); color:var(--rust);}
  .chip-list{display:flex; flex-wrap:wrap; gap:8px; min-height:20px;}
  .chip{background:var(--rust); color:#fff; padding:6px 12px; border-radius:100px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;}
  .chip button{background:none; border:none; color:#fff; cursor:pointer; font-size:13px; opacity:0.8; padding:0; line-height:1;}

  .submit-btn{width:100%; background:var(--ink); color:var(--paper-2); border:none; padding:16px; border-radius:14px; font-weight:700; font-size:15.5px; cursor:pointer; margin-top:6px;}
  .submit-btn:hover{background:#000;}
  .form-error{color:var(--rust); font-size:13px; margin-top:8px; font-weight:600;}
  .forgot-link{font-size:12.5px; color:var(--sage); font-weight:600; text-decoration:none;}
  .forgot-link:hover{text-decoration:underline;}

  /* live tag preview */
  .preview-wrap{position:sticky; top:100px;}
  .tag-plate{
    position:relative; background:linear-gradient(155deg,#e9c877,#b9873a 55%,#8f6a2c);
    border-radius:50% 50% 32% 32% / 62% 62% 22% 22%; padding:46px 30px 30px;
    box-shadow:0 25px 50px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.35);
    border:1px solid rgba(0,0,0,0.15);
  }
  .tag-plate::before{
    content:""; position:absolute; top:-30px; left:50%; margin-left:-64px;
    width:26px; height:30px; background:var(--brass); border:1px solid rgba(0,0,0,0.18); border-radius:50%;
    box-shadow: 34px -8px 0 0 var(--brass), 68px 0 0 0 var(--brass), 102px -8px 0 0 var(--brass);
  }
  .tag-plate::after{content:""; position:absolute; top:-56px; left:50%; transform:translateX(-50%); width:2px; height:20px; background:rgba(239,227,200,0.35);}
  .tag-inner{border:1.5px solid rgba(0,0,0,0.25); border-radius:16px; padding:20px 18px; background:rgba(255,255,255,0.06);}
  .tag-name{font-family:var(--stamp); font-size:clamp(22px,4vw,28px); color:var(--pine); text-align:center; letter-spacing:1px; text-transform:uppercase; margin:0 0 4px; word-break:break-word;}
  .tag-sub{font-family:var(--stamp); font-size:12.5px; color:rgba(30,42,34,0.75); text-align:center; margin:0 0 16px; letter-spacing:0.5px;}
  .tag-divider{height:1px; background:rgba(30,42,34,0.3); margin:14px 0;}
  .tag-row{display:flex; justify-content:space-between; font-family:var(--stamp); font-size:12.5px; color:var(--pine); padding:5px 0;}
  .tag-row span:first-child{opacity:0.65;}
  .tag-allergy-line{font-family:var(--stamp); font-size:12px; color:var(--rust); text-align:center; margin-top:10px; font-weight:700;}
  .stamp-flash{animation:flash .35s ease;}
  @keyframes flash{0%{filter:brightness(1.6);} 100%{filter:brightness(1);}}

  .preview-note{margin-top:16px; font-size:13px; color:rgba(247,239,221,0.55); text-align:center; line-height:1.5;}

  /* success / link block */
  .link-block{margin-top:26px; background:rgba(0,0,0,0.03); border:1.5px dashed rgba(32,41,31,0.25); border-radius:16px; padding:20px;}
  .link-block label{margin-bottom:10px;}
  .link-row{display:flex; gap:8px;}
  .link-row input{font-family:var(--stamp); font-size:13px; background:#fff;}
  .icon-btn{background:var(--ink); color:var(--paper-2); border:none; border-radius:10px; padding:0 16px; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;}
  .nfc-btn{width:100%; margin-top:12px; background:var(--brass); color:var(--pine); border:none; padding:14px; border-radius:12px; font-weight:700; cursor:pointer; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px;}
  .nfc-status{font-size:12.5px; margin-top:10px; text-align:center; color:rgba(32,41,31,0.65);}
  .nfc-compat{font-size:12px; font-weight:600; text-align:center; padding:9px 12px; border-radius:10px; margin-bottom:10px;}
  .nfc-compat.ok{background:rgba(92,122,90,0.12); color:var(--sage);}
  .nfc-compat.no{background:rgba(178,58,46,0.08); color:var(--rust);}
  .nfc-cancel{width:100%; margin-top:8px; background:transparent; border:1.5px solid rgba(32,41,31,0.2); color:rgba(32,41,31,0.7); padding:11px; border-radius:12px; font-weight:600; font-size:13px; cursor:pointer;}
  .nfc-cancel:hover{border-color:var(--rust); color:var(--rust);}

  /* NFC Tools mağaza butonları */
  .store-block{margin-top:18px; padding-top:16px; border-top:1px dashed rgba(32,41,31,0.15);}
  .store-label{font-size:12px; font-weight:600; color:rgba(32,41,31,0.55); text-align:center; margin:0 0 10px;}
  .store-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .store-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    background:var(--ink); color:var(--paper-2); border-radius:12px; padding:12px 10px;
    text-decoration:none; font-weight:700; font-size:13px; transition:transform .15s ease, background .15s ease;
  }
  .store-btn:hover{background:#000; transform:translateY(-1px);}
  .store-btn small{display:block; font-weight:500; font-size:10.5px; opacity:0.65; margin-top:1px;}

  /* my tags list */
  .mytags-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .mytag-item{display:flex; align-items:center; justify-content:space-between; background:var(--paper-2); border-radius:14px; padding:12px 14px; border:1px solid rgba(32,41,31,0.08);}
  .mytag-item .name{font-weight:700; font-size:14.5px;}
  .mytag-item .sub{font-size:12px; color:rgba(32,41,31,0.55);}
  .mytag-item button{background:none; border:1.5px solid rgba(32,41,31,0.2); border-radius:100px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer;}
  .mytag-item button:hover{border-color:var(--sage); color:var(--sage);}

  .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--paper-2); padding:13px 20px; border-radius:100px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:100; box-shadow:0 10px 30px rgba(0,0,0,0.3);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  footer{border-top:1px solid var(--line); padding:30px 0; text-align:center; font-size:13px; color:rgba(247,239,221,0.45);}

  /* ---------- found-pet view ---------- */
  #foundView{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
  .found-card{max-width:460px; width:100%; background:var(--paper); color:var(--ink); border-radius:28px; padding:0; box-shadow:var(--shadow); overflow:hidden;}
  .found-top{background:var(--rust); color:#fff; text-align:center; padding:18px; font-family:var(--stamp); font-size:13px; letter-spacing:1px; text-transform:uppercase;}
  .found-body{padding:34px 30px 30px;}
  .found-body .paw{width:52px; height:52px; margin:0 auto 14px; display:block;}
  .found-name{font-family:var(--display); font-weight:800; font-size:34px; text-align:center; margin:0 0 4px;}
  .found-age{text-align:center; font-size:14px; color:rgba(32,41,31,0.6); margin:0 0 22px;}
  .allergy-box{background:rgba(178,58,46,0.08); border:1.5px solid var(--rust); border-radius:14px; padding:14px 16px; margin-bottom:22px;}
  .allergy-box .lbl{font-family:var(--stamp); font-size:11.5px; color:var(--rust); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; font-weight:700;}
  .allergy-box .val{font-size:14.5px; font-weight:600;}
  .address-box{background:rgba(92,122,90,0.08); border:1.5px solid var(--sage); border-radius:14px; padding:14px 16px; margin-bottom:22px;}
  .address-box .lbl{font-family:var(--stamp); font-size:11.5px; color:var(--sage); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; font-weight:700;}
  .address-box .val{font-size:14.5px; font-weight:600; line-height:1.4;}
  .found-btn.maps{background:transparent; color:var(--ink); border:1.5px solid rgba(32,41,31,0.25);}
  .found-actions{display:flex; flex-direction:column; gap:10px;}
  .found-btn{display:flex; align-items:center; justify-content:center; gap:10px; padding:15px; border-radius:14px; font-weight:700; font-size:15px; text-decoration:none; border:none; cursor:pointer;}
  .found-btn.call{background:var(--sage); color:#fff;}
  .found-btn.call2{background:transparent; color:var(--sage); border:1.5px solid var(--sage);}
  .found-btn.insta{background:var(--ink); color:#fff;}
  .found-foot{text-align:center; font-size:12px; color:rgba(32,41,31,0.45); margin-top:20px;}
  .not-found{color:rgba(247,239,221,0.7); text-align:center; font-family:var(--body);}
  .back-link{display:inline-block; margin-top:18px; color:var(--brass-2); font-weight:600; font-size:13.5px; text-decoration:none;}