/* =========================================================
   EnFavori Shared Directory Hub
   Single source for Listeler + Kategoriler
   ========================================================= */

.directory-hub{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(460px,520px);
    gap:40px;
    align-items:center;
    min-height:260px;
    padding:18px 0 24px;
}

.directory-hub__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    min-height:218px;
}

.directory-hub__eyebrow{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 12px;
    color:#078f86;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}

.directory-hub__eyebrow-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#20cbbb;
    box-shadow:0 0 0 6px rgba(32,203,187,.13);
}

.directory-hub__title-row{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:50px;
}

.directory-hub__title-icon{
    display:grid;
    place-items:center;
    flex:0 0 50px;
    width:50px;
    height:50px;
    border-radius:15px;
    background:#fff;
    box-shadow:0 9px 24px rgba(20,38,75,.11);
}

.directory-hub__title-icon svg{
    display:block;
    width:48px;
    height:48px;
}

.directory-hub h1{
    margin:0;
    color:#14264b;
    font-size:clamp(36px,3.2vw,42px);
    line-height:1;
    letter-spacing:-.04em;
}

.directory-hub__lead{
    display:-webkit-box;
    overflow:hidden;
    max-width:650px;
    min-height:47.4px;
    max-height:47.4px;
    margin:13px 0 0;
    color:#667085;
    font-size:15px;
    line-height:1.58;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.directory-hub__stats{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    min-height:48px;
    margin-top:18px;
}

.directory-stat{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:7px 14px 7px 8px;
    border:1px solid #dce7e9;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(20,38,75,.055);
}

.directory-stat__icon{
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
}

.directory-stat__icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.directory-stat__text{
    display:flex;
    align-items:baseline;
    gap:5px;
    white-space:nowrap;
}

.directory-stat__text strong{
    color:#14264b;
    font-size:15px;
    line-height:1;
}

.directory-stat__text span{
    color:#667085;
    font-size:12.5px;
    font-weight:700;
}

.directory-stat--1{
    border-color:#bfe9e4;
    background:linear-gradient(180deg,#fff 0%,#f4fcfa 100%);
}

.directory-stat--1 .directory-stat__icon{
    background:#e5f9f6;
    color:#07988d;
}

.directory-stat--2{
    border-color:#d5e0ef;
    background:linear-gradient(180deg,#fff 0%,#f7f9fd 100%);
}

.directory-stat--2 .directory-stat__icon{
    background:#edf2f9;
    color:#214d78;
}

.directory-stat--3{
    border-color:#f0dfb4;
    background:linear-gradient(180deg,#fff 0%,#fffaf0 100%);
}

.directory-stat--3 .directory-stat__icon{
    background:#fff3d4;
    color:#b67a00;
}

.directory-hub__visual{
    min-width:0;
}

.directory-hub__visual-frame{
    overflow:hidden;
    width:100%;
    border:1px solid #dce7e9;
    border-radius:18px;
    background:#f7fbfb;
    box-shadow:0 16px 38px -28px rgba(20,38,75,.3);
}

.directory-hub__visual-frame img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:8 / 3;
    object-fit:cover;
}

.directory-browser{
    margin:10px 0 26px;
}

.directory-browser__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    min-height:76px;
    padding:0 0 14px;
    border-bottom:1px solid #e1e8ec;
}

.directory-browser__heading{
    min-width:0;
}

.directory-browser__eyebrow{
    display:block;
    margin-bottom:5px;
    color:#078f86;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.directory-browser h2{
    margin:0;
    color:#14264b;
    font-size:22px;
    line-height:1.15;
    letter-spacing:-.025em;
}

.directory-browser__heading p{
    margin:5px 0 0;
    color:#6a7485;
    font-size:13px;
    line-height:1.45;
}

.directory-browser__summary{
    display:flex;
    align-items:center;
    gap:14px;
    flex:0 0 auto;
}

.directory-browser__result{
    display:flex;
    align-items:baseline;
    gap:7px;
    color:#677487;
    font-size:12px;
    white-space:nowrap;
}

.directory-browser__result strong{
    color:#14264b;
    font-size:22px;
    line-height:1;
}

.directory-browser__reset{
    padding:0;
    border:0;
    background:transparent;
    color:#078f86;
    font:inherit;
    font-size:12.5px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
}

.directory-browser__reset:hover{
    text-decoration:underline;
}

.directory-browser__filters{
    display:grid;
    grid-template-columns:minmax(300px,1.55fr) minmax(210px,.78fr) minmax(210px,.78fr) 132px;
    gap:12px;
    align-items:stretch;
    padding-top:14px;
}

.directory-browser__field{
    position:relative;
    min-width:0;
}

.directory-browser__field--wide{
    grid-column:span 2;
}

.directory-browser__field input,
.directory-browser__field select,
.directory-browser__submit{
    box-sizing:border-box;
    width:100%;
    height:52px;
    min-height:52px;
    border-radius:13px;
    font:inherit;
    font-size:14px;
}

.directory-browser__field input,
.directory-browser__field select{
    border:1px solid #d8e3e7;
    background:#fff;
    color:#24324a;
    outline:none;
    transition:border-color .16s ease,box-shadow .16s ease;
}

.directory-browser__field input{
    padding:0 14px 0 43px;
}

.directory-browser__field select{
    padding:0 38px 0 13px;
}

.directory-browser__field input:hover,
.directory-browser__field select:hover{
    border-color:#c4d5da;
}

.directory-browser__field input:focus,
.directory-browser__field select:focus{
    border-color:#16b9aa;
    box-shadow:0 0 0 3px rgba(22,185,170,.1);
}

.directory-browser__search-icon{
    position:absolute;
    z-index:1;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    color:#718095;
    transform:translateY(-50%);
    pointer-events:none;
}

.directory-browser__search-icon svg{
    display:block;
    width:100%;
    height:100%;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}

.directory-browser__submit{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    justify-self:stretch;
    padding:0 18px;
    border:1px solid #0ca99d;
    background:linear-gradient(180deg,#18c5b6 0%,#0ca99d 100%);
    color:#fff;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(12,169,157,.14);
    transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}

.directory-browser__submit:hover{
    background:linear-gradient(180deg,#14b9ab 0%,#078f86 100%);
    box-shadow:0 10px 22px rgba(7,143,134,.18);
    transform:translateY(-1px);
}

.directory-browser__submit:active{
    transform:translateY(0);
}

@media(max-width:1100px){
    .directory-hub{
        grid-template-columns:minmax(0,1fr) minmax(400px,480px);
        gap:28px;
    }

    .directory-browser__filters{
        grid-template-columns:minmax(240px,1.3fr) minmax(180px,.85fr) minmax(180px,.85fr) 120px;
    }
}

@media(max-width:900px){
    .directory-hub{
        grid-template-columns:1fr;
        gap:18px;
    }

    .directory-hub__copy{
        min-height:auto;
    }

    .directory-hub__visual-frame{
        max-width:620px;
    }

    .directory-browser__head{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        min-height:0;
    }

    .directory-browser__summary{
        width:100%;
        justify-content:space-between;
    }

    .directory-browser__filters{
        grid-template-columns:1fr 1fr;
    }

    .directory-browser__field--wide{
        grid-column:1 / -1;
    }

    .directory-browser__submit{
        grid-column:1 / -1;
    }
}

@media(max-width:640px){
    .directory-hub{
        min-height:0;
        padding-top:12px;
    }

    .directory-hub__title-row{
        gap:11px;
    }

    .directory-hub__title-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:13px;
    }

    .directory-hub__title-icon svg{
        width:42px;
        height:42px;
    }

    .directory-hub h1{
        font-size:34px;
    }

    .directory-hub__lead{
        min-height:auto;
        max-height:none;
        font-size:14.5px;
        -webkit-line-clamp:unset;
    }

    .directory-hub__stats{
        flex-wrap:wrap;
        min-height:0;
        gap:8px;
    }

    .directory-stat{
        min-height:44px;
        padding:6px 11px 6px 7px;
    }

    .directory-stat__icon{
        width:31px;
        height:31px;
        flex-basis:31px;
    }

    .directory-stat__text strong{
        font-size:14px;
    }

    .directory-stat__text span{
        font-size:11.5px;
    }

    .directory-browser__summary{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .directory-browser__filters{
        grid-template-columns:1fr;
        gap:9px;
    }

    .directory-browser__field--wide,
    .directory-browser__submit{
        grid-column:auto;
    }

    .directory-browser__field input,
    .directory-browser__field select,
    .directory-browser__submit{
        height:50px;
        min-height:50px;
    }
}